LLQuizWidget

šŸš§

Pre-requisite

Make sure you initialise React Native SDK.

LLQuizWidget

LLQuizWidget is a quiz based widget UI component. This widget UI supports two kinds of widget:

  1. WidgetKind.TEXT_QUIZ
  2. WidgetKind.IMAGE_QUIZ
import { LLQuizWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

export function MyWidgetContainer() {
  return (
    <LLQuizWidget
      programId="xxxxx"
      widgetId="yyyyy"
      widgetKind={WidgetKind.IMAGE_QUIZ}
    />
  );
}

Hooks used by LLQuizWidget

LLQuizWidget Props

šŸ“˜

Customisation

Refer customisation core concepts to understand different level of component customisation.

programId

TypeDefault
String (Required)No Default

This is the Id of the program in which a given widget is published

widgetId

TypeDefault
String (Required)No Default

widgetKind

TypeDefault
WidgetKind (Required)No Default

onDismiss

TypeDefault
FunctionNo Default

Function that gets invoked whenever user dismisses the widget by clicking on dismiss Icon.
Pass onDismiss prop (with no op function) to make widget dismissible.

interactiveTimeout

TypeDefault
NumberNo default

Interactive timeout in epoch. Once the timeout gets elapsed, widget transition into Timed Out phase where it is in disabled state.
When setting interactiveTimeout as null, this overrides widget interactive timeout (that is set from producer suite) and widget becomes always interactive.

onInteractiveTimeout

TypeDefault
FunctionNo Default

Function that gets invoked whenever interactive timer gets elapsed. When interactiveTimeout is set to null, onInteractiveTimeout function would never be called.

WidgetComponent

TypeDefault
Component of type LLCoreWidgetLLCoreWidget

This is the core widget component that is responsible for loading widget details and rendering other part of widget UI (passed as children).
Refer LLCoreWidget docs for more details.

WidgetComponentStyles

TypeDefault
StyleSheet of type LLCoreWidgetStylesNo Default, if present styles props would be applied on top of internal LLCoreWidgetStyles

WidgetComponentStyles prop that could be used to modify styles of default rendered LLCoreWidget component.

HeaderComponent

TypeDefault
Component of type LLWidgetHeaderLLWidgetHeader

Refer LLWidgetHeader docs for more details.

Example usage:
import { LLQuizWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

function MyHeaderComponent(props: LLWidgetHeaderProps){
  // your custom widget header component
}

function MyWidget() {
  return (
    <LLQuizWidget
      programId="xxxxx"
      widgetId="yyyyy"
      widgetKind={WidgetKind.IMAGE_QUIZ}
      HeaderComponent={MyHeaderComponent}
    />
  );
}

HeaderComponentStyles

TypeDefault
StyleSheet of type LLWidgetHeaderStylesNo Default, if present styles props would be applied on top of internal LLWidgetHeaderStyles

HeaderComponentStyles prop that could be used to modify styles of default rendered LLWidgetHeader component.

FooterComponent

TypeDefault
Component of type LLWidgetFooterLLWidgetFooter

Refer LLWidgetFooter docs for more details.

Example usage:
import { LLQuizWidget, LLWidgetFooterProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

function MyFooterComponent(props: LLWidgetFooterProps){
  // your custom widget footer component
}

function MyWidget() {
  return (
    <LLQuizWidget
      programId="xxxxx"
      widgetId="yyyyy"
      widgetKind={WidgetKind.IMAGE_QUIZ}
      FooterComponent={MyFooterComponent}
    />
  );
}

FooterComponentStyles

TypeDefault
StyleSheet of type LLWidgetFooterStylesNo Default, if present styles props would be applied on top of internal LLWidgetFooterStyles

FooterComponentStyles prop that could be used to modify styles of default rendered LLWidgetHeader component.

BodyComponent

TypeDefault
Component of type LLQuizWidgetBodyLLQuizWidgetBody

Refer LLQuizWidgetBody in below section for more details.

BodyComponentStyles

TypeDefault
StyleSheet of type LLQuizWidgetBodyStylesNo Default, if present styles props would be applied on top of internal LLQuizWidgetBodyStyles

BodyComponentStyles prop that could be used to modify styles of default rendered LLQuizWidgetBody component.


LLQuizWidgetBody

This is a body component for a quiz widget responsible for rendering quiz choice details and its interaction.

Hooks used by LLQuizWidgetBody

LLQuizWidgetBody Props

šŸ“˜

Customisation

Refer customisation core concepts to understand different level of component customisation.

widgetId

TypeDefault
String (Required)No Default

styles

TypeDefault
Stylesheet of type LLVoteWidgetBodyStylesNo Default, if present styles props would be applied on top of internal LLVoteWidgetBodyStyles.

styles prop that could be used to modify styles of LLVoteWidgetBody component.

ChoiceOptionComponent

TypeDefault
Component of type LLWidgetChoiceOptionLLWidgetChoiceOption

Refer LLWidgetChoiceOptionin below section for more details.

ChoiceOptionComponentStyles

TypeDefault
StyleSheet of type LLWidgetOptionStylesNo Default, if present styles props would be applied on top of internal LLWidgetOptionStyles

ChoiceOptionComponentStyles prop that could be used to modify styles of default rendered LLWidgetChoiceOption component.


LLWidgetChoiceOption

LLWidgetChoiceOption is a container component that renders quiz widget choice option using LLWidgetOption as its presentational component. It derives all the choice details and interaction handler needed by LLWidgetOption component.

Hooks used by LLWidgetChoiceOption

LLWidgetChoiceOption Props

šŸ“˜

Customisation

Refer customisation core concepts to understand different level of component customisation.

widgetId

TypeDefault
String (Required)No Default

optionIndex

TypeDefault
Number (Required)No Default

Index of the widget option

selectedOptionIndex

TypeDefault
Number (Required)-1 when no option is selected

Index of the selected widget option

onOptionChange

TypeDefault
(optionIndex: number) => void;No Default

Function that gets invoked with option index whenever vote option is selected.

OptionComponent

TypeDefault
Component of type LLWidgetOptionLLWidgetOption

Presentational component for option component.

OptionComponentStyles

TypeDefault
StyleSheet of type LLWidgetOptionStylesNo Default, if present styles props would be applied on top of internal LLWidgetOptionStyles

OptionComponentStyles prop that could be used to modify styles of default rendered LLWidgetOption component.