LLCheerMeterWidget
Pre-requisite
Make sure you initialise React Native SDK.
LLCheerMeterWidget
LLCheerMeterWidget
is a cheer meter based widget UI component that could be used by your users to root for their favourable teams, players, tournaments, etc.
Snack expo playground
Refer LLCheerMeterWidget snack to play around with the widget
import { LLCheerMeterWidget } from '@livelike/react-native';
export function MyWidgetContainer() {
return (
<LLCheerMeterWidget
programId="xxxxx"
widgetId="yyyyy"
/>
);
}
Hooks used by LLCheerMeterWidget
LLCheerMeterWidget
LLCheerMeterWidget 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 |
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 { LLCheerMeterWidget, LLWidgetHeaderProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyHeaderComponent(props: LLWidgetHeaderProps){
// your custom widget header component
}
function MyWidget() {
return (
<LLCheerMeterWidget
programId="xxxxx"
widgetId="yyyyy"
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 { LLCheerMeterWidget, LLWidgetFooterProps } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
function MyFooterComponent(props: LLWidgetFooterProps){
// your custom widget footer component
}
function MyWidget() {
return (
<LLCheerMeterWidget
programId="xxxxx"
widgetId="yyyyy"
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 LLCheerMeterWidgetBody | LLCheerMeterWidgetBody |
Refer LLCheerMeterWidgetBody in below section for more details.
BodyComponentStyles
BodyComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCheerMeterWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetBodyStyles |
BodyComponentStyles
prop that could be used to modify styles of default rendered LLCheerMeterWidgetBody
component.
LLCheerMeterWidgetBody
This is a body component for a cheer meter widget responsible for rendering cheer meter results, option details and its interaction.
Hooks used by LLCheerMeterWidgetBody
LLCheerMeterWidgetBody
LLCheerMeterWidgetBody
Props
LLCheerMeterWidgetBody
PropswidgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
styles
styles
Type | Default |
---|---|
Stylesheet of type LLCheerMeterWidgetBodyStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetBodyStyles . |
styles
prop that could be used to modify styles of LLCheerMeterWidgetBody
component.
OptionComponent
OptionComponent
Type | Default |
---|---|
Component of type LLCheerMeterWidgetOption | LLCheerMeterWidgetOption |
Refer LLCheerMeterWidgetOption in below section for more details.
OptionComponentStyles
OptionComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCheerMeterWidgetOptionStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetOptionStyles |
OptionComponentStyles
prop that could be used to modify styles of default rendered LLCheerMeterWidgetOption
component.
ResultComponent
ResultComponent
Type | Default |
---|---|
Component of type LLCheerMeterWidgetResult | LLCheerMeterWidgetResult |
This component is responsible for rendering each option total cheer count.
ResultComponentStyles
ResultComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCheerMeterWidgetResultStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetResultStyles |
ResultComponentStyles
prop that could be used to modify styles of default rendered LLCheerMeterWidgetResult
component.
CheerCountComponent
CheerCountComponent
Type | Default |
---|---|
Component of type LLCheerMeterWidgetCheerCount | LLCheerMeterWidgetCheerCount |
This component is responsible for rendering total cheers count.
CheerCountComponentStyles
CheerCountComponentStyles
Type | Default |
---|---|
StyleSheet of type LLCheerMeterWidgetCheerCountStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetCheerCountStyles |
CheerCountComponentStyles
prop that could be used to modify styles of default rendered LLCheerMeterWidgetCheerCount
component.
LLCheerMeterWidgetOption
This is option component for a cheer meter widget responsible for rendering cheer meter option and its interaction.
Hooks used by LLCheerMeterWidgetOption
LLCheerMeterWidgetOption
LLCheerMeterWidgetOption
Props
LLCheerMeterWidgetOption
PropswidgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
optionIndex
optionIndex
Type | Default |
---|---|
Number (Required) | No Default |
Index of the option from the option array in widget details (that is options
in IWidgetPayload)
throttleTime
throttleTime
Type | Default |
---|---|
Number | 3000 |
throttle time in milliseconds used to throttle update interaction calls whenever user keeps on cheering by continuously pressing widget option.
styles
styles
Type | Default |
---|---|
Stylesheet of type LLCheerMeterWidgetOptionStyles | No Default, if present styles props would be applied on top of internal LLCheerMeterWidgetOptionStyles . |
styles
prop that could be used to modify styles of LLCheerMeterWidgetOption
component.
Updated 10 months ago