# ChatContext

The `ChatContext` is exposed by the [`Chat`](/chat/docs/sdk/react/v12/components/core-components/chat/) 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 value is forwarded to the context from the `Chat` component [prop `client`](/chat/docs/sdk/react/v12/components/core-components/chat#client/).

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

### channel

The currently active channel, which populates the [`Channel`](/chat/docs/sdk/react/v12/components/core-components/channel/) component.

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

### channelsQueryState

Exposes API that:

- indicates, whether and what channels query has been triggered within [`ChannelList` component](/chat/docs/sdk/react/v12/components/core-components/channel-list/) 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

The value is forwarded to the context from the `Chat` component [prop `customClasses`](/chat/docs/sdk/react/v12/components/core-components/chat#customclasses/)

| 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

The value is forwarded to the context from the `Chat` component [prop `theme`](/chat/docs/sdk/react/v12/components/core-components/chat#theme/)

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

### useImageFlagEmojisOnWindow

The value is forwarded to the context from the `Chat` component [prop `useImageFlagEmojisOnWindow`](/chat/docs/sdk/react/v12/components/core-components/chat#useimageflagemojisonwindow/).

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


---

This page was last updated at 2026-05-22T16:32:11.446Z.

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