@statflo/textkit-widget-sdk-react
TypeScript icon, indicating that this package has built-in type declarations

1.3.2 • Public • Published

TextKit by Statflo

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>
  )
}

Readme

Keywords

none

Package Sidebar

Install

npm i @statflo/textkit-widget-sdk-react

Weekly Downloads

2

Version

1.3.2

License

MIT

Unpacked Size

68.3 kB

Total Files

20

Last publish

Collaborators

  • emgem
  • jcroll.statflo.com
  • productlabs
  • dmstatflo
  • statflo-dev
  • statfloian