GuidesAPI EndpointsQuestionsChangelog
Guides

LLCoreWidget

Suggest Edits

LLCoreWidget is a container component used by various widget component where it is usually the first component rendered in the component hierarchy of a widget. This component is responsible for:

  • Loading widget details based on widgetId and widgetKind using useLoadWidgetEffect hook.
  • Add dismiss functionality using useWidgetDismiss.
  • Render LoadingComponent when widget details are been loaded.
  • Render ErrorComponent when there was an error loading widget details.
  • Render widget UI using children prop.

Hooks used by LLCoreWidget

LLCoreWidget 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 set of widgets are published from producer suite.

widgetId

TypeDefault
String (Required)No Default

widgetKind

TypeDefault
WidgetKind (Required)No Default

styles

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

LoadingComponent

TypeDefault
React ComponentActivityIndicator as default Loading component

Component to render when widget details are being loaded.

Example usage:
import React from 'react';
import { LLCoreWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
import { View, Text } from 'react-native';

const CustomLoadingComponent = () => {
  return (
    <View>
      <Text> Loading Widget... </Text>
    </View>
  );
};

export function MyWidget() {
  return (
    <LLCoreWidget
      programId="xxxxx"
      widgetId="yyyy"
      widgetKind={WidgetKind.TEXT_POLL}
      LoadingComponent={CustomLoadingComponent}
    >
      {({ widget, onDismiss }) => {
        // render widget UI
      }}
    </LLWidget>
  );
}

ErrorComponent

TypeDefault
React ComponentView and Text component showing Unable to load widgets error text

Component to render whenever there's an error in loading widget.

Example usage:
import React from 'react';
import { LLWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';
import { View, Text } from 'react-native';

const CustomErrorComponent = () => {
  return (
		<View>
    	<Text style={{ color: 'red' }}> Ohh snap! widgets not loaded </Text>
    </View>
  );
};

export function MyWidget() {
  return (
    <LLWidget
      programId="xxxxx"
      widgetId="yyyy"
      widgetKind={WidgetKind.TEXT_POLL}
      ErrorComponent={CustomErrorComponent}
    >
      {({ widget, onDismiss }) => {
        // render widget UI
      }}
    </LLWidget>
  );
}

onDismiss

TypeDefault
FunctionNo Default

Function that gets invoked whenever user dismisses the widget by clicking on dismiss Icon that is rendered as part of widget header.

children

TypeDefault
(props: LLCoreWidgetChildrenProps) => ReactNodeNo Default

children prop for LLCoreWidget that is called with prop LLCoreWidgetChildrenProps

Example usage:
import React from 'react';
import { LLCoreWidget } from '@livelike/react-native';
import { WidgetKind } from '@livelike/javascript';


export function MyWidget() {
  return (
    <LLCoreWidget
      programId="xxxxx"
      widgetId="yyyy"
      widgetKind={WidgetKind.TEXT_POLL}
      ErrorComponent={CustomErrorComponent}
    >
      {({ widget, onDismiss }) => { // core widget calling children prop function with widget, onDismiss 
        // render widget UI
      }}
    </LLWidget>
  );
}

Updated about 1 year ago