LLCoreWidget
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
andwidgetKind
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
LLCoreWidget 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 set of widgets are published from producer suite.
widgetId
widgetId
Type | Default |
---|---|
String (Required) | No Default |
widgetKind
widgetKind
Type | Default |
---|---|
WidgetKind (Required) | No Default |
styles
styles
Type | Default |
---|---|
Stylesheet of type LLCoreWidgetStyles | No Default, if present styles props would be applied on top of internal LLCoreWidgetStyles . |
LoadingComponent
LoadingComponent
Type | Default |
---|---|
React Component | ActivityIndicator 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
ErrorComponent
Type | Default |
---|---|
React Component | View 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
onDismiss
Type | Default |
---|---|
Function | No Default |
Function that gets invoked whenever user dismisses the widget by clicking on dismiss Icon that is rendered as part of widget header.
children
Type | Default |
---|---|
(props: LLCoreWidgetChildrenProps) => ReactNode | No 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 10 months ago