# React Components for TalkJS

The `@talkjs/react-components` library provides React chat UI components for [TalkJS](https://talkjs.com).

## Prerequisites

To use this package, you will need a [TalkJS account](https://talkjs.com/dashboard/login). TalkJS provides a ready-to-use chat client for your application. Your account gives you access to TalkJS's free development environment.

## Examples

Install [`@talkjs/react-components`](https://www.npmjs.com/package/@talkjs/react-components) and [`@talkjs/core`](https://www.npmjs.com/package/@talkjs/core):

```sh
npm install @talkjs/react-components @talkjs/core
# or
yarn add @talkjs/react-components @talkjs/core
```

Import the `Chatbox` component and the related styling into the component where you want to have your chat UI:

```js
import { Chatbox } from "@talkjs/react-components";
import "@talkjs/react-components/default.css";
```

Then add the `Chatbox` component:

```js
<Chatbox
  appId="<APP_ID>"
  userId="sample_user_alice"
  conversationId="sample_conversation"
/>
```

Replace the `<APP_ID>` with your TalkJS app ID, which you can find in the **Settings** tab of the TalkJS dashboard.

For more details, see our [React getting started guide](https://talkjs.com/docs/UI_Components/React/).

## Support

If you encounter any problems with `@talkjs/react-components`, please open a [chat with support](https://talkjs.com/?chat). TalkJS support is staffed by engineers.