GuidesAPI EndpointsQuestionsChangelog
Guides

LLWidgetHeader

Suggest Edits

🚧

Pre-requisite

Make sure you initialise React Native SDK.

Widget header Anatomy

Widget Header Anatomy

LLWidgetHeader is a fundamental atomic component that is used by various widget components. This component is rendered as a top component as part of widget anatomy.

import { LLWidgetHeader } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';

export function MyWidgetHeader() {
  const interactiveTimeoutHandler = () => {
    // your custom logic
  }
  return (
    <LLWidgetHeader
      title="Who scored more goals in last FIFA?"
      // number of milliseconds since EPOC (Date.now() or new Date().getTime())
      interactiveTimeout="1684926773919"
      dismissable={true}
      onInteractiveTimeout={interactiveTimeoutHandler}
    />
  );
}

Hooks used by LLWidgetHeader

Component Hierarchy

LLWidgetHeader Props

📘

Customisation

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

title

TypeDefault
StringNo Default

title refers to the title or question in widget payload.

dismissable

TypeDefault
Booleanfalse

If dismissable, show close icon which when pressed removes the widget from the UI.

onDismiss

TypeDefault
FunctionNo Default

Function that gets invoked whenever user dismisses the widget by clicking on dismiss Icon.

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.

styles

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

WidgetInteractiveTimerComponent

TypeDefault
Component of type LLWidgetInteractiveTimerLLWidgetInteractiveTimer

Horizontal timer component rendered whenever based on interactiveTimeout value. The timer components updates the progress on every 500ms. To customise rendered timer component or customise updateInterval, pass your own custom timer component or extend LLWidgetInteractiveTimer component by setting required props.

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

// Widget header with custom timer component
function MyTimerComponent(props: LLWidgetInteractiveTimerProps){
  // your own custom timer implementation
}

function MyWidgetHeader() {
  return (
    <LLWidgetHeader
      title="Who scored more goals in last FIFA?"
      // number of milliseconds since EPOC (Date.now() or new Date().getTime())
      interactiveTimeout="1684926773919"
      dismissable={true}
      WidgetInteractiveTimerComponent={MyTimerComponent}
    />
  );
}

// Widget header with customised stock Timer component
function CustomTimerComponent(props: LLWidgetInteractiveTimerProps){
  // as an example, we are customising stock timer component behaviour by setting updateInterval prop 
  return <LLWidgetInteractiveTimer {...props} updateInterval={1000}/>
}

export function WidgetHeader() {
  return (
    <LLWidgetHeader
      title="Who scored more goals in last FIFA?"
      // number of milliseconds since EPOC (Date.now() or new Date().getTime())
      interactiveTimeout="1684926773919"
      dismissable={true}
      WidgetInteractiveTimerComponent={CustomTimerComponent}
    />
  );
}

WidgetInteractiveTimerComponentStyles

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

LLWidgetInteractiveTimerStyles prop which could be used to modify styles of default rendered LLWidgetInteractiveTimer component.

DismissIconComponent

TypeDefault
Component of type LLWidgetHeaderDismissIconLLWidgetHeaderDismissIcon

Dismiss icon component which when pressed removes the widget from the UI. In case needed, pass your own custom icon component.

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

// Widget header with custom timer component
function MyDismissIconComponent(props: LLWidgetHeaderDismissIconProps){
  // your own custom dismiss icon component
}

function MyWidgetHeader() {
  return (
    <LLWidgetHeader
      title="Who scored more goals in last FIFA?"
      dismissable={true}
      DismissIconComponent={MyDismissIconComponent}
    />
  );
}

DismissIconComponentStyles

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

DismissIconComponentStyles prop that could be used to modify styles of default rendered LLWidgetHeaderDismissIcon component.

Updated about 1 year ago