This is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13) .

ChatContext

ChatContext is provided by the Chat component. All SDK components under Chat can access it via the useChatContext hook.

Best Practices

Access context only inside children of Chat to avoid null/undefined values.
Prefer setActiveChannel over manual prop wiring when switching channels.
Use channelsQueryState to drive loading and error UI consistently.
Keep context consumers narrow to avoid unnecessary re-renders.
Treat customClasses and theme as read-only configuration in context consumers.

Pull values from ChatContext with our custom hook:

const { client, setActiveChannel } = useChatContext();

Value	Description	Type
`channel`	The currently active channel, which powers the `Channel` component.	`Channel`
`channelsQueryState`	Exposes channel-list query state and setters through `queryInProgress`, `setQueryInProgress`, `error`, and `setError`. `queryInProgress` can be `uninitialized`, `reload`, `load-more`, or `null`.	`ChannelsQueryState`
`client`	Forwarded from the `Chat` component prop `client`.	`StreamChat`
`closeMobileNav`	Closes the mobile navigation.	`() => void`
`customClasses`	Forwarded from the `Chat` prop `customClasses`.	`CustomClasses`
`getAppSettings`	Callback to fetch app settings, including image and file upload config.	`() => Promise<AppSettingsAPIResponse>`
`latestMessageDatesByChannel`	Map of channel IDs to the date of the user’s latest message. Used to determine slow mode countdown.	`{ [key: string]: Date }`
`mutes`	Users muted by the connected user.	`Mute[]`
`navOpen`	Whether the mobile nav is open at mobile breakpoints. Defaults to `true`.	`boolean`
`openMobileNav`	Opens the mobile navigation.	`() => void`
`setActiveChannel`	Sets the active channel. Used by `ChannelList` to switch channels, and can be overridden via context.	`(newChannel?: Channel, watchers?: { limit?: number; offset?: number }) => void`
`theme`	Forwarded from the `Chat` prop `theme`.	`string`
`useImageFlagEmojisOnWindow`	Forwarded from the `Chat` prop `useImageFlagEmojisOnWindows`. Defaults to `false`.	`boolean`