# Chat

> **Info:** This is documentation for **Stream Chat React SDK v13**, which is no longer actively maintained. For up-to-date documentation, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

The `Chat` component wraps your app and provides [`ChatContext`](https://getstream.io/chat/docs/sdk/react/v13/components/contexts/chat-context/), including the `StreamChat` client. All other SDK components must be nested under `Chat`.

## Best Practices

- Render `Chat` once at the app root so a single client instance is shared.
- Create and connect the client outside render loops to avoid reconnect churn.
- Keep `customClasses` minimal and include required default classes when overriding.
- Set `i18nInstance` up front to avoid flashing between languages.
- Use `theme` or CSS variables before resorting to heavy class overrides.

## Basic Usage

`Chat` doesn’t render UI by itself. Once you have a `StreamChat` client, pass it as the `client` prop to make it available via context.

```tsx
<Chat client={client}>
  <Channel channel={channel}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>
```

Any child of `Chat` can access `ChatContext` via the `useChatContext` hook.

```tsx
const { client } = useChatContext();
```

## Props

### client

The `StreamChat` client instance. Use it to call `stream-chat-js` methods.

```tsx
const channel = client.channel("messaging", {
  members: ["nate", "roy"],
});
```

| Type   |
| ------ |
| object |

### customClasses

Custom CSS class names that replace the library’s default container classes. Use this to remove or override the built-in wrapper classes.

In the below example we will replace two of the default container classes, `str-chat` (maps to the `chat` key) and
`str-chat-channel` (maps to the `channel`) key. Once replaced, add whatever styles you want in your own stylesheets.

```tsx
const customClasses: CustomClasses = {
  chat: "custom-chat-class",
  channel: "custom-channel-class",
};

const App = () => (
  <Chat client={client} customClasses={customClasses}>
    <ChannelList />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);
```

Accepted keys and the default classes they override:

- chat - `str-chat`
- chatContainer - `str-chat__container`
- channel - `str-chat-channel`
- channelList - `str-chat-channel-list`
- message - `str-chat__li str-chat__li--${groupStyles}`
- messageList - `str-chat__list`
- thread - `str-chat__thread`
- threadList - `str-chat__list--thread`
- virtualMessage - `str-chat__virtual-list-message-wrapper`
- virtualizedMessageList - `str-chat__virtual-list`

>
> **Warning:** Be careful overriding `VirtualizedMessageList` styles; defaults handle critical layout for performance.
>

| Type   |
| ------ |
| object |

### defaultLanguage

Default fallback language for UI translations. Defaults to `en`.

| Type   | Default |
| ------ | ------- |
| string | 'en'    |

### i18nInstance

`Streami18n` translation instance. Use it to change the default language or override strings.

```tsx
const i18nInstance = new Streami18n({
  language: "es",
  translationsForLanguage: {
    "Nothing yet...": "Nada",
  },
});

<Chat client={client} i18nInstance={i18nInstance}>
  {/* children of Chat component */}
</Chat>;
```

| Type   |
| ------ |
| object |

### initialNavOpen

Controls whether `str-chat-channel-list--open` is applied to the `ChannelList` root element. You provide the CSS that uses this class to manage layout, for example:

```css
@media screen and (min-width: 768px) {
  .str-chat-channel-list--open {
    width: 100%;
  }

  .str-chat-channel-list {
    position: fixed;
    z-index: 1;
    width: 0;
  }
}
```

In this example, the list takes the full width on small screens when the class is present; otherwise it’s hidden.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### theme

Adds className(s) to the `Channel` and `ChannelList` components.

| Type   |
| ------ |
| string |

### useImageFlagEmojisOnWindows

Windows 10 renders country flag emojis as characters by default. Set this to `true` to load a custom web font and render flags as images.

>
> **Warning:** If you’re upgrading from versions before `11.0.0`, import `stream-chat-react/css/emoji-replacement.css` because it’s no longer bundled in the main stylesheet.
>

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### isMessageAIGenerated

A callback that determines whether a message was AI-generated. Defaults to `() => false`.

| Type                               | Default     |
| ---------------------------------- | ----------- |
| (message: LocalMessage) => boolean | () => false |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/core-components/chat/](https://getstream.io/chat/docs/sdk/react/v13/components/core-components/chat/).