# @yext/chat-headless-react

> the official React UI Bindings layer for Chat Headless

Latest version **0.9.5** (published 2025-03-14) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @yext/chat-headless-react
pnpm add @yext/chat-headless-react
yarn add @yext/chat-headless-react
bun add @yext/chat-headless-react
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.9.5 |
| Published | 2025-03-14 |
| First published | 2023-05-15 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 83.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | watson@yext.com |
| Maintainers | jaredhood, jrhoads, apavlick, ejaffee1, ttanushree, yext_eng_npm, benmcginnis, kunal-p, tmeyer2115, mbowman, jronkin_yext, ataing, svc_jenkins_consulting_yext, cblair_yext, emilyfranklin, willgorick, bhaines-yext, mkouzel, rconsalo, jknutsonn, tritpham, sharvey, npatel94, alapre, johncho92, canderson_yext, ssaunders, rpope, eal172, peteros, ytruong, mkilpatrick, baigel1, ajgist, jballschneider, eefi, pmomesso, dkang3021, mleifer, lymarrie, tobyko, jfromm, dsurducan, dgurland, jamesyang14, zhengzhi, slapshot-bot, petya182, paigep, htamirepi, dlsgusrn7577, bryanreed, lilwang, afriedman00, sre-ops, scheerla, a_ashwik, bajohnson-yext, saivythik, tarun-revalla-yext, manash-rauta, gargsi, souravkumar, yext-bot, anguyenyext, tsayyapureddi, johnnguyen, tpotla, nbramblett, rpope-yext, deepakyext, sahilvaidya, mgdunn2, kgerner-yext, fondriest, sscott24, emilyzhang777, karthik-surya-yext, jgomezy, gonzalo-novak, mauriciohr-yext, lwyattyext, aritchey-yext, qciccoretti |
| Keywords | chat, yext, redux, state management |

## Links

- npm: https://www.npmjs.com/package/@yext/chat-headless-react
- Repository: https://github.com/yext/chat-headless
- Homepage: https://github.com/yext/chat-headless#readme
- Issues: https://github.com/yext/chat-headless/issues
- npm.io page: https://npm.io/package/@yext/chat-headless-react

## Dependencies (3)

- [react-redux](https://npm.io/package/react-redux.md) ^8.0.5
- [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.9.5
- [@yext/chat-headless](https://npm.io/package/@yext/chat-headless.md) ^0.12.2

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.9.5 (latest) — 2025-03-14
- 0.6.0-alpha.38.3 (alpha) — 2023-09-11
- 0.9.4 — 2025-03-13
- 0.9.3 — 2024-10-22
- 0.9.2 — 2024-09-10
- 0.9.1 — 2024-07-11
- 0.9.0 — 2024-07-05
- 0.8.0 — 2024-06-05
- 0.7.0 — 2024-05-06
- 0.6.1 — 2023-09-11
- 0.6.0 — 2023-09-11
- 0.6.0-alpha.38.2 — 2023-09-11
- 0.6.0-alpha.38 — 2023-09-11
- 0.5.11 — 2023-08-30
- 0.5.10 — 2023-08-18
- … 18 more at https://npm.io/package/@yext/chat-headless-react/versions

## README

# Chat Headless React

Chat Headless React is the official React UI Bindings layer for Chat Headless

[Full Documentation](./docs/chat-headless-react.md)

## Getting Started - `ChatHeadlessProvider`

Chat Headless React includes an `<ChatHeadlessProvider />` component, which takes in a `ChatConfig`, instantiate a `ChatHeadless` instance and makes it available to the rest of your app:

```tsx
import { ChatHeadlessProvider, ChatConfig } from "@yext/chat-headless-react";

const config: ChatConfig = {
  botId: "BOT_ID",
  apiKey: "API_KEY",
};

function MyApp() {
  return (
    <ChatHeadlessProvider config={config}>
      {/* Add components that use Chat as children */}
      <MyComponent />
    </ChatHeadlessProvider>
  );
}
```

## Respond to State Updates with `useChatState`

`useChatState` reads a value from the `ChatState` state and subscribes to updates.

```tsx
import { useChatState } from "@yext/chat-headless-react";

export default function MyComponent() {
  const isLoadingStatus = useChatState((state) => state.conversation.isLoading);
  return <div>{`Loading Status: ${isLoadingStatus}`}</div>;
}
```

## Dispatch Actions with `useChatActions`

`useChatActions` allows you to dispatch actions using the `ChatHeadless` instance.

```tsx
import { useChatActions } from "@yext/chat-headless-react";
import { useCallback } from "react";

function MyComponent() {
  const actions = useChatActions();
  const onClick = useCallback(() => {
    actions.setChatLoadingStatus(true);
  }, [actions]);

  return <button onClick={onClick}>Click Me</button>;
}
```

---
_Source: https://npm.io/package/@yext/chat-headless-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._