Skip to main content
Version: v12

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.

Type
object

channel

The currently active channel, which populates the Channel component.

Type
Channel

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
Type
ChannelsQueryState

closeMobileNav

The function to close mobile navigation.

Type
function

customClasses

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

Type
object

getAppSettings

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

Type
function

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)

Type
{ [key: string]: Date }

mutes

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

Type
Mute[]

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

TypeDefault
booleantrue

openMobileNav

The function to open mobile navigation.

Type
function

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.

Type
function

theme

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

Type
string

useImageFlagEmojisOnWindow

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

TypeDefault
booleanfalse

Did you find this page helpful?