---
id: chat
title: Chat
---

The `Chat` component is a React Context provider that wraps the entire Stream Chat application. It provides the [`ChatContext`](../contexts/chat-context.mdx)
to its children, which includes the `StreamChat` client instance. All other components within the library must be nested as children
of `Chat` to maintain proper functionality.

## Basic Usage

The `Chat` component does not inject any UI, so its implementation is fairly simple. Once an instance of the `StreamChat` client
has been created, you pass the client object as a prop to add it to the `ChatContext`.

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

Any child of the `Chat` component has access to the `ChatContext`. Each React Context in the component library can be accessed with
one of our custom hooks, which must be imported individually. The `ChatContext` values are accessed with `useChatContext` hook.

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

## Props

### <div class="label required basic">Required</div> client

The `StreamChat` client instance. Any methods from the `stream-chat-js` API interface can be run off this object.

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

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

### customClasses

Object containing custom CSS classnames to override the library's default container CSS. Many of the high level React components in the library come with predefined CSS container classes that inject basic display styling.
To remove or replace these wrapper classes entirely, the `Chat` component takes a `customClasses` prop. This prop accepts a mapping of overridable container classnames.

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>
);
```

The accepted object keys and the default classnames they override are as follows:

- 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`

:::caution
Be careful overriding the default styles on the `VirtualizedMessageList` component, as our defaults handle much of the logic
that makes the list UI perform optimally.
:::

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

### defaultLanguage

Sets the default fallback language for UI component translation, defaults to 'en' for English.

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

### i18nInstance

The `Streami18n` translation instance. Create an instance of this class when you wish to change the connected user's default
language or override default text in the library.

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

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

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

### initialNavOpen

The prop controls setting of the class `str-chat-channel-list--open` on the `ChannelList` root `div`. It is up to the integrator to decide, what styles should be assigned to this class to control the app layout. An example could be as follows:

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

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

Here, the list will take the whole width of the screen on small devices once the class `str-chat-channel-list--open` is assigned to the root div. Otherwise, the list is not visible as it has zero width.

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

### theme

Used for injecting className/s to the `Channel` and `ChannelList` components.

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

### useImageFlagEmojisOnWindows

Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead.
Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending
on the platform). Set this prop to true if you want to use these custom emojis for Windows users.

:::caution
If you're moving from older versions to `11.0.0` then make sure to import related stylesheet from `stream-chat-react/css/emoji-replacement.css` as it has been removed from our main stylesheet to reduce final bundle size for integrators who do not wish to use this feature.
:::

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