Naughty Pinching Mannequins

    TypeScript icon, indicating that this package has built-in type declarations

    1.3.2 • Public • Published

    TextKit by Statflo

    TextKit Widget React SDK


    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 />

    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 (
          <p>My Widget Content</p>
          <button onClick={handleUpdateHeader}>Update Header</button>
          <button onClick={handleUpdateFooter}>Update Footer</button>

    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

    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.


    import { MediumContent, LargeContent } from "@statflo/textkit-widget-sdk-react";
    export default function Widget() {
      return (
            This content will be visible when Standard widgets are in their default view state. WidgetViewState.Medium.
            This content will be visible when Standard widgets are in their default view state. WidgetViewState.Large.




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

    DownloadsWeekly Downloads






    Unpacked Size

    68.3 kB

    Total Files


    Last publish


    • dpham71
    • productlabs
    • alexeidarmin
    • dmstatflo
    • statflo-dev
    • statfloian