ChatContext

The ChatContext is exposed by the Chat component. Since Chat wraps the entire chat application, all other components in the library have access to the values stored in this context. You can access the context values by calling the useChatContext custom hook.

Basic Usage

Pull values from context 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 populates the Channel component.

channelsQueryState

Exposes API that:

• indicates, whether and what channels query has been triggered within ChannelList component by its channels pagination controller - queryInProgress of type ChannelQueryState
• allows to set the queryInProgress state with setQueryInProgress state setter
• keeps track of error response from the channels query - error
• allows to set the error state with setError

The queryInProgress values are:

• uninitialized - the initial state before the first channels query is triggered
• reload - the initial channels query (loading the first page) is in progress
• load-more - loading the next page of channels
• null - at least one channels page has been loaded and there is no query in progress at the moment

closeMobileNav

The function to close mobile navigation.

customClasses

The value is forwarded to the context from the Chat component prop customClasses

getAppSettings

The callback function used to get available client-side app settings, includes image and file upload config.

latestMessageDatesByChannel

Object containing the date of the latest message sent by the current user by channels (this is used to detect if slow mode countdown should be started)

mutes

An array of users that have been muted by the connected user.

navOpen

When the screen width is at a mobile breakpoint, whether the mobile navigation menu is open.

openMobileNav

The function to open mobile navigation.

setActiveChannel

A function to set the currently active channel. This is used in the ChannelList component to navigate between channels. You can override the default behavior by pulling it from context and then utilizing the function.

theme

The value is forwarded to the context from the Chat component prop theme

useImageFlagEmojisOnWindow

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