---
id: chat_context
title: ChatContext
---

The `ChatContext` is exposed by the [`Chat`](../core-components/chat.mdx) component. Since `Chat` wraps the entire chat application, all other components in the library
have access to the values stored in this context. You can access the context values by calling the `useChatContext` custom hook.

## Basic Usage

Pull values from context with our custom hook:

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

## Values

### client

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

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

### channel

The currently active channel, which populates the [`Channel`](../core-components/channel.mdx) component.

| Type    |
| ------- |
| Channel |

### channelsQueryState

Exposes API that:

- indicates, whether and what channels query has been triggered within [`ChannelList` component](../core-components/channel-list.mdx) by its channels pagination controller - `queryInProgress` of type `ChannelQueryState`
- allows to set the `queryInProgress` state with `setQueryInProgress` state setter
- keeps track of error response from the channels query - `error`
- allows to set the `error` state with `setError`

The `queryInProgress` values are:

- `uninitialized` - the initial state before the first channels query is triggered
- `reload` - the initial channels query (loading the first page) is in progress
- `load-more` - loading the next page of channels
- `null` - at least one channels page has been loaded and there is no query in progress at the moment

| Type                 |
|----------------------|
| `ChannelsQueryState` |

### closeMobileNav

The function to close mobile navigation.

| Type     |
| -------- |
| function |

### customClasses

Object containing custom CSS classnames to override the library's default container CSS. See [CSS and Theming](../../guides/theming/css-and-theming.mdx)
for implementation assistance.

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

### getAppSettings

The callback function used to get available client-side app settings, includes image and file upload config.

| Type     |
| -------- |
| function |

### latestMessageDatesByChannel

Object containing the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started)

| Type                    |
| ----------------------- |
| { [key: string]: Date } |

### mutes

An array of users that have been muted by the connected user.

| Type   |
| ------ |
| Mute[] |

### navOpen

When the screen width is at a mobile breakpoint, whether the mobile navigation menu is open.

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

### openMobileNav

The function to open mobile navigation.

| Type     |
| -------- |
| function |

### setActiveChannel

A function to set the currently active channel. This is used in the `ChannelList` component to navigate between channels.
You can override the default behavior by pulling it from context and then utilizing the function.

| Type     |
| -------- |
| function |

### theme

Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../../guides/theming/css-and-theming.mdx#css-variables) of your app.

| Type  |
| ----- |
| Theme |

### themeVersion

Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../theming/introduction.mdx).

| Type           | Default |
| -------------- | ------- |
| `'1'` \| `'2'` | `'1'`   |

### useImageFlagEmojisOnWindow

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.

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