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

• useWidgetInteractiveTimeout
• useWidgetExpiryEffect

LLCheerMeterWidget Props

📘

Customisation

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

programId

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

widgetId

onDismiss

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

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

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

WidgetComponent

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 prop that could be used to modify styles of default rendered LLCoreWidget component.

HeaderComponent

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 prop that could be used to modify styles of default rendered LLWidgetHeader component.

FooterComponent

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 prop that could be used to modify styles of default rendered LLWidgetHeader component.

BodyComponent

Refer LLCheerMeterWidgetBody in below section for more details.

BodyComponentStyles

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

• useStyles
• useWidgetOptions

LLCheerMeterWidgetBody Props

widgetId

styles

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

OptionComponent

Refer LLCheerMeterWidgetOption in below section for more details.

OptionComponentStyles

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

ResultComponent

This component is responsible for rendering each option total cheer count.

ResultComponentStyles

ResultComponentStyles prop that could be used to modify styles of default rendered LLCheerMeterWidgetResult component.

CheerCountComponent

This component is responsible for rendering total cheers count.

CheerCountComponentStyles

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

• useTheme
• useStyles
• useWidgetOptions
• useIsWidgetDisabled
• useCheerMeterOnOptionPress

LLCheerMeterWidgetOption Props

widgetId

optionIndex

Index of the option from the option array in widget details (that is options in IWidgetPayload)

throttleTime

throttle time in milliseconds used to throttle update interaction calls whenever user keeps on cheering by continuously pressing widget option.

styles

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