TextKit Widget React SDK
Installation
yarn add @statflo/textkit-widget-sdk-react
TextKit Provider
Begin by importing the provider into your App.tsx
file
import { TextKitWidgetProvider } from "@statflo/textkit-widget-sdk-react";
import Widget from "./Widget";
export default function App() {
return (
<TextKitWidgetProvider header="My header" footer="My footer">
<Widget />
</TextKitWidgetProvider>
)
}
Available properties
Property | Type | Default | Description |
---|---|---|---|
header | string |
undefined |
Initial header value. Recommended for Standard Widgets. |
footer | string |
undefined |
Initial footer value. Recommended for Standard Widgets. |
label | string |
undefined |
Required for Action widgets that use the Conversation Scope. |
scrollOverride | boolean |
false |
Override the default scroll implmentation so you can create and manage your own. |
TextKit hook
The following hook will give you access to the current widget state along with helpers for performing various functions. When importing this hook ensure it's within a child component of the above Provider.
import { useTextKitWidget } from "@statflo/textkit-widget-sdk-react";
export default function Widget() {
const { state, setHeader, setFooter } = useTextKitWidget();
const handleUpdateHeader = () => {
setHeader("My new header");
};
const handleUpdateFooter = () => {
setFooter("My new footer");
};
return (
<div>
<p>My Widget Content</p>
<button onClick={handleUpdateHeader}>Update Header</button>
<button onClick={handleUpdateFooter}>Update Footer</button>
</div>
);
}
Available Properties/Methods
Property | Type | Property | Description |
---|---|---|---|
state | object |
Current widget state please review below for all the available properties. | |
setFooter | function |
string |
Update the widget footer. Used for Standard Widgets. |
setHeader | function |
string |
Update the widget header. Used for Standard Widgets. |
setLabel | function |
string |
Update the widget label. Used for Action Widgets using the Conversation Scope. |
setOpen | function |
boolean |
Open or close the widget. |
setSize | function |
WidgetViewSize |
Change the size of the widget. Used for Standard Widgets. Must be an instance of WidgetViewSize which can be imported. See below. |
appendMessage | function |
string |
The text/string you want to append to the message input. Used for Sendable Widets. |
replaceMessage | function |
string |
The text/string you want to replace to the message input with. Used for Sendable Widets. |
client | widgetClient |
Access to the underlying widget class for low level implementations. Read the Widget SDK Readme for more details. |
State Properties
When importing state
from useTextKitWidget()
these are the available properties.
Property | Type | Description |
---|---|---|
context | object |
Will return the current conversation context. |
defaultScroll | boolean |
Whether you are using the default scrolling functionality or not. Default scrolling will be based on the length of the body and the state of the widget. |
isOpen | boolean |
Whether the widget is opened or not. Used in Standard widgets. |
isReady | boolean |
The state of the widget. This will be true when TextKit is aware the widget has been registered. |
isShown | boolean |
Whether the widget is shown or not. Used in Sendables and Action widgets. |
maxHeight | number |
Will return the available maximum height based on the resolution. Great for when creating your own scrolling capabilities. |
size | WidgetViewSize |
Will contain one of the enum values from WidgetViewSize. This is for Standard Widgets only. |
Widget View Size
import { WidgetViewSize } from "@statflo/textkit-widget-sdk-react";
/**
* Example function
*
* Available enums
*
* WidgetViewSize.Small
* WidgetViewSize.Medium
* WidgetViewSize.Large
*/
setSize(WidgetViewSize.Medium);
Medium & Large Content Wrappers
These helper components listen for the size
state changes and will display the correct content based on the current state value.
Example
import { MediumContent, LargeContent } from "@statflo/textkit-widget-sdk-react";
export default function Widget() {
return (
<div>
<MediumContent>
This content will be visible when Standard widgets are in their default view state. WidgetViewState.Medium.
</MediumContent>
<LargeContent>
This content will be visible when Standard widgets are in their default view state. WidgetViewState.Large.
</LargeContent>
</div>
)
}