# ChannelStateContext

`ChannelStateContext` is provided by [`Channel`](/chat/docs/sdk/react/v13/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

### channel

The active `StreamChat` channel instance consumed by `Channel` and its children.

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

### channelCapabilities

The allowed channel permissions for the currently connected user.

| Type                      |
| ------------------------- |
| `Record<string, boolean>` |

### channelConfig

Configuration for the active channel.

| Type            |
| --------------- |
| `ChannelConfig` |

### channelUnreadUiState

The read state maintained for use by components representing channel unread state (for example `UnreadMessagesSeparator`, `UnreadMessagesNotification`).

| Property                    | Type                    | Description                                                                                                                                                                                               |
| --------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **last_read**               | `Date`                  | Date when the channel was marked read the last time.                                                                                                                                                      |
| **unread_messages**         | `number`                | The count of unread messages in a given channel. Unread count refers only to foreign (not own) unread messages.                                                                                           |
| **first_unread_message_id** | `string` or `undefined` | The ID of the message that was marked unread (`notification.mark_unread` event). The value is available only when a message is marked unread. Therefore, cannot be relied on to place unread messages UI. |
| **last_read_message_id**    | `string` or `undefined` | The ID of the message preceding the first unread message.                                                                                                                                                 |

| Type                   |
| ---------------------- |
| `ChannelUnreadUiState` |

### error

Error from loading the channel (if any); otherwise null.

| Type            |
| --------------- |
| `Error \| null` |

### findURLFn

Custom function to identify URLs in a string for later generation of link previews. See the guide [Link Previews in Message Input](/chat/docs/sdk/react/v13/guides/customization/link-previews/) for more.

| Type                         |
| ---------------------------- |
| `(text: string) => string[]` |

### giphyVersion

The value is forwarded to the context from the `Channel` component [prop `giphyVersion`](/chat/docs/sdk/react/v13/components/core-components/channel#giphyversion/).

| Type   | Default        |
| ------ | -------------- |
| string | 'fixed_height' |

### imageAttachmentSizeHandler

The value is forwarded to the context from the `Channel` component [prop `imageAttachmentSizeHandler`](/chat/docs/sdk/react/v13/components/core-components/channel#imageattachmentsizehandler/).

| Type                                                              |
| ----------------------------------------------------------------- |
| `(a: Attachment, e: HTMLElement) => ImageAttachmentConfiguration` |

### hasMore

Whether the channel has older messages to paginate.

| Type    |
| ------- |
| boolean |

### hasMoreNewer

Whether the channel has newer messages to paginate.

| Type    |
| ------- |
| boolean |

#### highlightedMessageId

Used internally for jump-to-message. The message with this ID is highlighted after the jump.

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

### loading

Whether the channel is loading.

| Type    |
| ------- |
| boolean |

### loadingMore

Whether older messages are loading.

| Type    |
| ------- |
| boolean |

### loadingMoreNewer

Whether newer messages are loading as the user scrolls down (used internally by `VirtualizedMessageList`).

| Type    |
| ------- |
| boolean |

### members

Members of this channel (members are permanent; watchers are currently online).

| Type                                    |
| --------------------------------------- |
| `Record<string, ChannelMemberResponse>` |

### messages

Array of [message objects](/chat/docs/javascript/send_message/).

| Type             |
| ---------------- |
| `LocalMessage[]` |

### mutes

An array of muted users for a `channel`.

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

### notifications

Temporary notifications added to `MessageList` on specific actions.

| Type                                                       |
| ---------------------------------------------------------- |
| `{id: string, text: string, type: 'success' \| 'error'}[]` |

### onLinkPreviewDismissed

Custom function to react to link preview dismissal. See the guide [Link Previews in Message Input](/chat/docs/sdk/react/v13/guides/customization/link-previews/) for more.

| Type                                 |
| ------------------------------------ |
| `(linkPreview: LinkPreview) => void` |

### pinnedMessages

The messages that are pinned in the `channel`.

| Type             |
| ---------------- |
| `LocalMessage[]` |

### read

The read state for each `channel` member.

| Type                               |
| ---------------------------------- |
| `Record<string, ChannelReadState>` |

### suppressAutoscroll

Whether auto-scroll to bottom is suppressed (used by `MessageList` and `VirtualizedMessageList`).

| Type    |
| ------- |
| boolean |

### shouldGenerateVideoThumbnail

The value is forwarded to the context from the `Channel` component [prop `shouldGenerateVideoThumbnail`](/chat/docs/sdk/react/v13/components/core-components/channel#shouldgeneratevideothumbnail/).

| Type      |
| --------- |
| `boolean` |

### thread

The parent message for a `thread`, if there is one, otherwise null.

| Type                   |
| ---------------------- |
| `LocalMessage \| null` |

### threadHasMore

Boolean showing if there are more messages available in current active `thread`, set to false when the end of pagination is reached.

| Type    |
| ------- |
| boolean |

### threadLoadingMore

If the thread is currently loading more messages.

| Type    |
| ------- |
| boolean |

### threadMessages

Array of messages within a `thread`.

| Type             |
| ---------------- |
| `LocalMessage[]` |

### threadSuppressAutoscroll

Flag signalling whether the scroll to the bottom is prevented in thread. Used internally by `MessageList` and `VirtualizedMessageList` components.

| Type    |
| ------- |
| boolean |

### videoAttachmentSizeHandler

The value is forwarded to the context from the `Channel` component [prop `videoAttachmentSizeHandler`](/chat/docs/sdk/react/v13/components/core-components/channel#videoattachmentsizehandler/).

| Type                                                              |
| ----------------------------------------------------------------- |
| `(a: Attachment, e: HTMLElement) => VideoAttachmentConfiguration` |

### watcherCount

The number of watchers on the `channel`.

| Type   |
| ------ |
| number |

### watchers

An array of users who are currently watching the `channel`.

| Type                           |
| ------------------------------ |
| `Record<string, UserResponse>` |

### watcher_count

The number of watchers on the `channel`.

| Type   |
| ------ |
| number |


---

This page was last updated at 2026-04-21T09:53:40.382Z.

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