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 typeChannelQueryState
- allows to set the
queryInProgress
state withsetQueryInProgress
state setter - keeps track of error response from the channels query -
error
- allows to set the
error
state withsetError
The queryInProgress
values are:
uninitialized
- the initial state before the first channels query is triggeredreload
- the initial channels query (loading the first page) is in progressload-more
- loading the next page of channelsnull
- 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[] |
navOpen
When the screen width is at a mobile breakpoint, whether the mobile navigation menu is open.
Type | Default |
---|---|
boolean | true |
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
.
Type | Default |
---|---|
boolean | false |