---
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 value is forwarded to the context from the `Chat` component [prop `client`](../../components/core-components/chat.mdx#client).

| 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

The value is forwarded to the context from the `Chat` component [prop `customClasses`](../../components/core-components/chat.mdx#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`](../../components/core-components/chat.mdx#theme)

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

### useImageFlagEmojisOnWindow

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

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