LLPredictionWidget
Pre-requisite
Make sure you initialise React Native SDK.
LLPredictionWidget
LLPredictionWidget
is a prediction based widget UI component. This widget UI supports two kinds of widget:
WidgetKind.TEXT_PREDICTION
WidgetKind.IMAGE_PREDICTION
import { LLPredictionWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
export function MyWidgetContainer() {
return (
<LLPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_PREDICTION}
/>
);
}
Hooks used by LLPredictionWidget
LLPredictionWidget
LLPredictionWidget Props
Customisation
Refer customisation core concepts to understand different level of component customisation.
programId
programId
Type | Default |
---|---|
String (Required) | No Default |
This is the Id of the program in which a given widget is published
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
widgetKind
widgetKind
Type | Default |
---|---|
WidgetKind (Required) | No Default |
inlineFollowUp
inlineFollowUp
Type | Default |
---|---|
Boolean | false |
This prop when present would auto render (in place of prediction widget) its corresponding prediction followup widget whenever it is published from producer suite.
onDismiss
onDismiss
Type | Default |
---|---|
Function | No 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
interactiveTimeout
Type | Default |
---|---|
Number | No 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
onInteractiveTimeout
Type | Default |
---|---|
Function | No Default |
Function that gets invoked whenever interactive timer gets elapsed. When interactiveTimeout
is set to null
, onInteractiveTimeout
function would never be called.
WidgetComponent
WidgetComponent
Type | Default |
---|---|
Component of type LLCoreWidget | LLCoreWidget |
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
WidgetComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCoreWidgetStyles | No 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
HeaderComponent
Type | Default |
---|---|
Component of type LLWidgetHeader | LLWidgetHeader |
Refer LLWidgetHeader docs for more details.
Example usage:
import { LLPredictionWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyHeaderComponent(props: LLWidgetHeaderProps){
// your custom widget header component
}
function MyWidget() {
return (
<LLPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_PREDICTION}
HeaderComponent={MyHeaderComponent}
/>
);
}
HeaderComponentStyles
HeaderComponentStyles
Type | Default |
---|---|
StyleSheet of type LLWidgetHeaderStyles | No 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
FooterComponent
Type | Default |
---|---|
Component of type LLWidgetFooter | LLWidgetFooter |
Refer LLWidgetFooter docs for more details.
Example usage:
import { LLPredictionWidget, LLWidgetFooterProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyFooterComponent(props: LLWidgetFooterProps){
// your custom widget footer component
}
function MyWidget() {
return (
<LLPredictionWidget
programId="xxxxx"
widgetId="yyyyy"
widgetKind={WidgetKind.IMAGE_PREDICTION}
FooterComponent={MyFooterComponent}
/>
);
}
FooterComponentStyles
FooterComponentStyles
Type | Default |
---|---|
StyleSheet of type LLWidgetFooterStyles | No 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
BodyComponent
Type | Default |
---|---|
Component of type LLVoteWidgetBody | LLVoteWidgetBody |
Refer LLVoteWidgetBody in below section for more details.
BodyComponentStyles
BodyComponentStyles
Type | Default |
---|---|
StyleSheet of type LLVoteWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLVoteWidgetBodyStyles |
BodyComponentStyles
prop that could be used to modify styles of default rendered LLVoteWidgetBody
component.
LLVoteWidgetBody
This is a body component for a vote option based widget responsible for rendering all the option details and its interaction.
Hooks used by LLVoteWidgetBody
LLVoteWidgetBody
LLVoteWidgetBody
Props
LLVoteWidgetBody
PropsCustomisation
Refer customisation core concepts to understand different level of component customisation.
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
styles
styles
Type | Default |
---|---|
Stylesheet of type LLVoteWidgetBodyStyles | No 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.
VoteOptionComponent
VoteOptionComponent
Type | Default |
---|---|
Component of type LLWidgetVoteOption | LLWidgetVoteOption |
Refer LLWidgetVoteOption docs for more details.
VoteOptionComponentStyles
VoteOptionComponentStyles
Type | Default |
---|---|
StyleSheet of type LLWidgetOptionStyles | No Default, if present styles props would be applied on top of internal LLWidgetOptionStyles |
VoteOptionComponentStyles
prop that could be used to modify styles of default rendered LLWidgetVoteOption
component.
Updated 11 months ago