# ChannelStateContext

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

`ChannelStateContext` is provided by [`Channel`](https://getstream.io/chat/docs/sdk/react/v14/components/core-components/channel/) and exposes state for the active channel. Access it with `useChannelStateContext`.

## Best Practices

- Use state values from context instead of storing duplicate local copies.
- Treat `messages`, `members`, and `read` as reactive sources for UI updates.
- Prefer `channelCapabilities` to gate UI actions instead of hard-coding permissions.
- Use `suppressAutoscroll` to respect user scroll position for long histories.
- Guard against null `channel` or `error` states in custom components.

## Basic Usage

Pull values from `ChannelStateContext` with our custom hook:

```tsx
const { channel, watchers } = useChannelStateContext();
```

## Values

| Value                          | Description                                                                                                                                                                                             | Type                                                              |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `channel`                      | The active `StreamChat` channel instance consumed by `Channel` and its children.                                                                                                                        | `Channel`                                                         |
| `channelCapabilities`          | The allowed channel permissions for the currently connected user.                                                                                                                                       | `Record<string, boolean>`                                         |
| `channelConfig`                | Configuration for the active channel.                                                                                                                                                                   | `ChannelConfig`                                                   |
| `channelUnreadUiState`         | Read state maintained for unread UI such as `UnreadMessagesSeparator` and `UnreadMessagesNotification`. Includes `last_read`, `unread_messages`, `first_unread_message_id`, and `last_read_message_id`. | `ChannelUnreadUiState`                                            |
| `error`                        | Error from loading the channel, if any. Otherwise `null`.                                                                                                                                               | `Error \| null`                                                   |
| `giphyVersion`                 | Forwarded from the `Channel` component [prop `giphyVersion`](https://getstream.io/chat/docs/sdk/react/v14/components/core-components/channel/#props). Defaults to `'fixed_height'`.                                          | `string`                                                          |
| `hasMore`                      | Whether the channel has older messages to paginate.                                                                                                                                                     | `boolean`                                                         |
| `hasMoreNewer`                 | Whether the channel has newer messages to paginate.                                                                                                                                                     | `boolean`                                                         |
| `highlightedMessageId`         | Used internally for jump-to-message. The message with this ID is highlighted after the jump.                                                                                                            | `string`                                                          |
| `imageAttachmentSizeHandler`   | Forwarded from the `Channel` component [prop `imageAttachmentSizeHandler`](https://getstream.io/chat/docs/sdk/react/v14/components/core-components/channel/#props).                                                          | `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |
| `loading`                      | Whether the channel is loading.                                                                                                                                                                         | `boolean`                                                         |
| `loadingMore`                  | Whether older messages are loading.                                                                                                                                                                     | `boolean`                                                         |
| `loadingMoreNewer`             | Whether newer messages are loading as the user scrolls down. Used internally by `VirtualizedMessageList`.                                                                                               | `boolean`                                                         |
| `members`                      | Members of this channel. Members are permanent; watchers are currently online.                                                                                                                          | `Record<string, ChannelMemberResponse>`                           |
| `messages`                     | Array of [message objects](https://getstream.io/chat/docs/javascript/send-message/).                                                                                                                                        | `LocalMessage[]`                                                  |
| `mutes`                        | Array of muted users for the current channel.                                                                                                                                                           | `Mute[]`                                                          |
| `notifications`                | Temporary notifications added to `MessageList` on specific actions.                                                                                                                                     | `{id: string, text: string, type: 'success' \| 'error'}[]`        |
| `pinnedMessages`               | Messages that are pinned in the channel.                                                                                                                                                                | `LocalMessage[]`                                                  |
| `read`                         | Read state for each channel member.                                                                                                                                                                     | `Record<string, ChannelReadState>`                                |
| `shouldGenerateVideoThumbnail` | Forwarded from the `Channel` component [prop `shouldGenerateVideoThumbnail`](https://getstream.io/chat/docs/sdk/react/v14/components/core-components/channel/#props).                                                        | `boolean`                                                         |
| `suppressAutoscroll`           | Whether auto-scroll to bottom is suppressed. Used by `MessageList` and `VirtualizedMessageList`.                                                                                                        | `boolean`                                                         |
| `thread`                       | Parent message for a thread, if there is one. Otherwise `null`.                                                                                                                                         | `LocalMessage \| null`                                            |
| `threadHasMore`                | Whether there are more messages available in the active thread.                                                                                                                                         | `boolean`                                                         |
| `threadLoadingMore`            | Whether the thread is currently loading more messages.                                                                                                                                                  | `boolean`                                                         |
| `threadMessages`               | Array of messages within a thread.                                                                                                                                                                      | `LocalMessage[]`                                                  |
| `threadSuppressAutoscroll`     | Whether scrolling to the bottom is prevented in the thread. Used internally by `MessageList` and `VirtualizedMessageList`.                                                                              | `boolean`                                                         |
| `videoAttachmentSizeHandler`   | Forwarded from the `Channel` component [prop `videoAttachmentSizeHandler`](https://getstream.io/chat/docs/sdk/react/v14/components/core-components/channel/#props).                                                          | `(a: Attachment, e: HTMLElement) => VideoAttachmentConfiguration` |
| `watcher_count`                | Legacy snake-case watcher count from channel state.                                                                                                                                                     | `number`                                                          |
| `watcherCount`                 | The number of watchers on the channel.                                                                                                                                                                  | `number`                                                          |
| `watchers`                     | Users who are currently watching the channel.                                                                                                                                                           | `Record<string, UserResponse>`                                    |

---

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