Skip to content

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.

Basic Usage

Pull values from ChatContext with our custom hook:

const { client, setActiveChannel } = useChatContext();

Values

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
customClasses Forwarded from the Chat prop customClasses. CustomClasses
getAppSettings Callback to fetch app settings, including image and file upload config. () => Promise<AppSettingsAPIResponse>
latestMessageDatesByChannels 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[]
searchController Shared SearchController instance used by the SDK search surfaces. SearchController
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
useImageFlagEmojisOnWindows Forwarded from the Chat prop useImageFlagEmojisOnWindows. Defaults to false. boolean