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

client

The value is forwarded to the context from the Chat component prop client.

channel

The currently active channel, which powers the Channel component.

channelsQueryState

Exposes API that:

• indicates which channel query is in progress in ChannelList via queryInProgress
• allows updates via setQueryInProgress
• tracks query errors via error
• allows updates via setError

queryInProgress values:

• uninitialized - before the first query
• reload - initial page load in progress
• load-more - loading the next page
• null - no query in progress after at least one page loaded

closeMobileNav

Closes the mobile navigation.

customClasses

Forwarded from the Chat prop customClasses.

getAppSettings

Callback to fetch app settings (includes image and file upload config).

latestMessageDatesByChannel

Map of channel IDs to the date of the user’s latest message. Used to determine slow mode countdown.

mutes

Users muted by the connected user.

navOpen

Whether the mobile nav is open at mobile breakpoints.

openMobileNav

Opens the mobile navigation.

setActiveChannel

Sets the active channel. Used by ChannelList to switch channels, and can be overridden via context.

theme

Forwarded from the Chat prop theme.

useImageFlagEmojisOnWindow

Forwarded from the Chat prop useImageFlagEmojisOnWindows.