# @saytv/chat-react > React wrapper for the [SayTV Chat SDK](https://www.npmjs.com/package/@saytv/chat-sdk) — a fully featured, themeable chat widget. Latest version **2.7.1** (published 2026-08-24) · 0 weekly downloads ## Install ```sh npm install @saytv/chat-react pnpm add @saytv/chat-react yarn add @saytv/chat-react bun add @saytv/chat-react ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.7.1 | | Published | 2026-08-24 | | First published | 2026-03-10 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 20.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | aaalllaaa, swapsq1 | ## Links - npm: https://www.npmjs.com/package/@saytv/chat-react - npm.io page: https://npm.io/package/@saytv/chat-react ## Recent versions - 2.7.1 (latest) — 2026-08-24 - 2.7.0 — 2026-08-20 - 2.6.0 — 2026-08-17 - 2.5.4 — 2026-08-17 - 2.5.3 — 2026-08-13 - 2.5.2 — 2026-08-13 - 2.5.1 — 2026-08-12 - 2.5.0 — 2026-08-11 - 2.4.6 — 2026-08-07 - 2.4.5 — 2026-08-05 - 2.4.4 — 2026-08-04 - 2.4.3 — 2026-08-04 - 2.4.2 — 2026-08-04 - 2.4.1 — 2026-08-04 - 2.4.0 — 2026-07-31 - … 18 more at https://npm.io/package/@saytv/chat-react/versions ## README # @saytv/chat-react React wrapper for the [SayTV Chat SDK](https://www.npmjs.com/package/@saytv/chat-sdk) — a fully featured, themeable chat widget. ## Installation ```bash npm install @saytv/chat-react ``` ## Usage ```tsx import { SayTVChat, useSayTVChat } from '@saytv/chat-react'; function App() { const { chatRef, setToken, setTheme } = useSayTVChat(); return ( 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'`) | | `locale` | `string` | No | BCP-47 UI language, e.g. `'ar'`, `'pt-BR'` (default: `'en'`). RTL languages lay out automatically | | `translations` | `Record>` | No | Translation catalogs keyed by locale, merged over English | | `translationsUrl` | `string` | No | URL of a hosted flat catalog to fetch for the active locale | | `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"`) | | `hideHeader` | `boolean` | No | Hide the top title bar (default: `false`) | | `hideFooter` | `boolean` | No | Hide the bottom tab-bar navigation (default: `false`) | | `avatarUrl` | `string` | No | Image URL to use as the signed-in user's avatar (unless they pick one in-app) | | `className` | `string` | No | CSS class on wrapper div | | `style` | `CSSProperties` | No | Inline styles on wrapper div | > **Visual customization** (colors, spacing, header/footer styling, moderator/message appearance, etc.) is done with `--stv-*` CSS variables set on the `` element. Pass them through the `style` prop, e.g. `style={{ ['--stv-header-bg']: '#0b1020', ['--stv-message-gap']: '12px' }}`. See the [Theming](https://docs.saytv.com/customization/theming) and [Sizing & Layout](https://docs.saytv.com/customization/sizing) guides for the full list. ### 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 ```ts const { chatRef, getElement, setToken, setTheme, setUsername } = useSayTVChat(); ``` | Return | Description | |---|---| | `chatRef` | Pass to `` for imperative access | | `getElement()` | Returns the underlying `` HTMLElement | | `setToken(token)` | Update the access token | | `setTheme(theme)` | Switch between `'light'` and `'dark'` | | `setUsername(name)` | Rename the signed-in user. Returns a `Promise`; rejects with a `422` and `errors.username` when the name is taken, too short, or blocked by moderation | ## Theming Override CSS custom properties via inline styles: ```tsx ``` See the [@saytv/chat-sdk docs](https://www.npmjs.com/package/@saytv/chat-sdk) for the full list of CSS custom properties. ## Localization Set the UI language with `locale` (BCP-47). English is built in; supply other languages as catalogs — any untranslated key falls back to English. RTL locales lay out automatically. ```tsx // Option A: point at a hosted catalog (SayTV publishes en/ar/es/fr) // Option B: pass a catalog object ``` See the [Localization guide](https://www.npmjs.com/package/@saytv/chat-sdk) for the full key list and ready-made catalogs. ## License Proprietary. All rights reserved. --- _Source: https://npm.io/package/@saytv/chat-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._