@saytv/chat-react

React wrapper for the SayTV Chat SDK — a fully featured, themeable chat widget.

Installation

npm install @saytv/chat-react

Usage

import { SayTVChat, useSayTVChat } from '@saytv/chat-react';

function App() {
  const { chatRef, setToken, setTheme } = useSayTVChat();

  return (
    <SayTVChat
      ref={chatRef}
      appId="your-app-id"
      theme="light"
      height={700}
      width="100%"
      onMessageSent={(e) => console.log('Sent:', e.detail)}
      onError={(e) => console.error('Error:', e.detail)}
    />
  );
}

Props

| Prop | Type | Required | Description | |---|---|---|---| | appId | string | No | App identifier (resolves API URL) | | env | 'production' \| 'staging' | No | Environment (default: 'production') | | apiUrl | string | No | API base URL (overrides appId/env) | | authToken | string | No | User access token | | builtInAuth | boolean | No | Enable built-in login UI (default: true) | | fanzone | boolean | No | Enable fanzone features (default: false) | | height | number | No | Height in pixels (default: 850) | | width | string | No | CSS width (default: '450px') | | theme | 'light' \| 'dark' | No | Color theme (default: 'light') | | mode | 'page-chat' | No | Widget mode | | pageId | string | No | Page identifier (used with mode="page-chat") | | pageName | string | No | Page display name (used with mode="page-chat") | | className | string | No | CSS class on wrapper div | | style | CSSProperties | No | Inline styles on wrapper div |

Event Callbacks

| Prop | Description | |---|---| | onReady | Widget initialized and ready | | onUserLogin | User logged in | | onUserLogout | User logged out | | onMessageSent | Current user sent a message | | onMessageReceived | New message received from another user | | onNavigation | Page changed within the widget | | onEpisodeChanged | User selected an episode | | onRoomJoined | User entered a chat room | | onThemeChanged | Color theme switched | | onPageChatReady | Page chat episode created or reconnected | | onError | SDK error occurred |

All event callbacks receive a CustomEvent with relevant data in event.detail.

Hook

const { chatRef, getElement, setToken, setTheme } = useSayTVChat();

| Return | Description | |---|---| | chatRef | Pass to <SayTVChat ref={chatRef}> for imperative access | | getElement() | Returns the underlying <saytv-chat> HTMLElement | | setToken(token) | Update the access token | | setTheme(theme) | Switch between 'light' and 'dark' |

Theming

Override CSS custom properties via inline styles:

<SayTVChat
  appId="your-app-id"
  style={{ '--stv-color-primary': '#4f46e5' } as React.CSSProperties}
/>

See the @saytv/chat-sdk docs for the full list of CSS custom properties.

License

Proprietary. All rights reserved.