> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Adapter

> Learn about the library that allows rendering and interaction with the chat widget inside a React application.

This library lets you easily add [chat widget functionality](https://platform.text.com/open-chat-widget) to your [React](https://reactjs.org/) application.

## Installation

### Using npm

```bash theme={null}
npm install @livechat/widget-react
```

### Using a script tag

```js theme={null}
<script src="http://unpkg.com/@livechat/widget-core@1.4.0"></script>
<script src="https://unpkg.com/@livechat/widget-react@1.4.0"></script>
```

## Usage

Use the `TextWidget` component and provide your `organizationId`:

```js theme={null}
import { TextWidget, EventHandlerPayload } from "@livechat/widget-react"

function App() {
  function handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
    console.log("TextWidget.onNewEvent", event)
  }

  return (
    <TextWidget
      organizationId="614fe72f-3319-43c6-9ae6-c410c65df230"
      visibility="maximized"
      onNewEvent={handleNewEvent}
    />
  )
}
```

### Props

#### Config data

All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.

| Prop                      | Type                                   |
| ------------------------- | -------------------------------------- |
| license \| organizationId | string (required)                      |
| group                     | string                                 |
| customerName              | string                                 |
| customerEmail             | string                                 |
| chatBetweenGroups         | boolean                                |
| sessionVariables          | `Record<string, string>`               |
| visibility                | 'maximized' \| 'minimized' \| 'hidden' |

#### Event handlers

All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.

* [onReady](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-ready)
* [onAvailabilityChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-availability-changed)
* [onVisibilityChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-visibility-changed)
* [onCustomerStatusChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-customer-status-changed)
* [onNewEvent](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-new-event)
* [onFormSubmitted](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-form-submitted)
* [onRatingSubmitted](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-rating-submitted)
* [onGreetingDisplayed](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-greeting-displayed)
* [onGreetingHidden](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-greeting-hidden)
* [onRichMessageButtonClicked](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-rich-message-button-clicked)

### Hooks

This package exports a set of [React Hooks](https://reactjs.org/docs/hooks-reference.html) that allow for consuming reactive data from the chat widget in any place of the application as long as the `LiveChatWidget` or `TextWidget` component is rendered in the tree.

#### useWidgetState

Access the current chat widget `availability` or `visibility` state if the chat widget is loaded.

```js theme={null}
import { useWidgetState } from "@livechat/widget-react";

function App() {
  const widgetState = useWidgetState();

  if (widgetState) {
    return (
      <div>
        <span>{widgetState.availability}</span>
        <span>{widgetState.visibility}</span>
      </div>
    );
  }
}
```

#### useWidgetIsReady

Check if the chat widget is ready using the boolean flag `isWidgetReady`.

```js theme={null}
import { useWidgetIsReady } from "@livechat/widget-react";

function App() {
  const isWidgetReady = useWidgetIsReady();

  return <div>Chat Widget is {isWidgetReady ? "loaded" : "loading..."}</div>;
}
```

#### useWidgetChatData

Access the `chatId` and `threadId` of the chat if there's one currently available.

```js theme={null}
import { useWidgetChatData } from "@livechat/widget-react";

function App() {
  const chatData = useWidgetChatData();

  if (chatData) {
    return (
      <div>
        <span>{chatData.chatId}</span>
        <span>{chatData.threadId}</span>
      </div>
    );
  }
}
```

#### useWidgetGreeting

Access the current greeting `id` and `uniqueId` if one is currently displayed (received and not hidden).

```js theme={null}
import { useWidgetGreeting } from "@livechat/widget-react";

function App() {
  const greeting = useWidgetGreeting();

  if (greeting) {
    return (
      <div>
        <span>{greeting.id}</span>
        <span>{greeting.uniqueId}</span>
      </div>
    );
  }
}
```

#### useWidgetCustomerData

Access the `id`, `isReturning`, `status`, and `sessionVariables` of the current customer if the chat widget is loaded.

```js theme={null}
import { useWidgetCustomerData } from "@livechat/widget-react";

function App() {
  const customerData = useWidgetCustomerData();

  if (customerData) {
    return (
      <div>
        <span>{customerData.id}</span>
        <span>{customerData.isReturning}</span>
        <span>{customerData.status}</span>
        <ul>
          {Object.entries(customerData.sessionVariables).map(([key, value]) => (
            <li key={key}>{value}</li>
          ))}
        </ul>
      </div>
    );
  }
}
```