Skip to main content

MessageContext

The MessageContext is established within the Message component. It provides data to the Message UI component and its children. Use the values stored within this context to build a custom Message UI component. You can access the context values by calling the useMessageContext custom hook.

Basic Usage#

Pull values from context with our custom hook:

const { message, threadList } = useMessageContext();

Values#

actionsEnabled#

If true, actions such as edit, delete, flag, etc. are enabled on the message.

TypeDefault
booleantrue

additionalMessageInputProps#

Additional props to be passed to the underlying MessageInput component that's rendered while editing.

Type
object

clearEditingState#

When called, this function will exit the editing state on the message.

Type
(event?: React.BaseSyntheticEvent) => void

customMessageActions#

An object containing custom message actions (key) and function handlers (value).

Type
object

editing#

If true, the message toggles to an editing state.

TypeDefault
booleanfalse

endOfGroup#

When true, the message is the last one in a group sent by a specific user (only used in the VirtualizedMessageList).

Type
boolean

firstOfGroup#

When true, the message is the first one in a group sent by a specific user (only used in the VirtualizedMessageList).

Type
boolean

formatDate#

Overrides the default date formatting logic, has access to the original date object.

Type
(date: Date) => string

getMessageActions#

Function that returns an array of the allowed actions on a message by the currently connected user.

Type
() => MessageActionsArray

groupedByUser#

If true, group messages sent by each user (only used in the VirtualizedMessageList).

TypeDefault
booleanfalse

groupStyles#

An array of potential styles to apply to a grouped message (ex: top, bottom, single).

TypeOptions
string[]'' | 'middle' | 'top' | 'bottom' | 'single'

handleAction#

Function that calls an action on a message.

Type
(dataOrName?: string | FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise<void>

handleDelete#

Function that removes a message from the current channel.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleEdit#

Function that edits a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleFlag#

Function that flags a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleMute#

Function that mutes the sender of a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleOpenThread#

Function that opens a Thread on a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handlePin#

Function that pins a message in the current channel.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

handleReaction#

Function that adds/removes a reaction on a message.

Type
(reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>

handleRetry#

Function that retries sending a message after a failed request (overrides the function stored in ChannelActionContext).

Type
(message: StreamMessage) => Promise<void>

initialMessage#

When true, signifies the message is the parent message in a thread list.

TypeDefault
booleanfalse

isMyMessage#

Function that returns whether or not a message belongs to the current user.

Type
() => boolean

isReactionEnabled#

If true, reactions are enabled in the currently active channel.

TypeDefault
booleantrue

lastReceivedId#

The latest message ID in the current channel.

Type
string

message#

The StreamChat message object, which provides necessary data to the underlying UI components.

Type
object

messageListRect#

DOMRect object linked to the parent MessageList component.

Type
DOMRect

mutes#

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

TypeDefault
Mute[]ChannelStateContext['mutes']

onMentionsClickMessage#

Function that runs on click of an @mention in a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

onMentionsHoverMessage#

Function that runs on hover of an @mention in a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

onReactionListClick#

Function that runs on click of the reactions list component.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

onUserClick#

Function that runs on click of a user avatar.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

onUserHover#

Function that runs on hover of a user avatar.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

pinPermissions#

The user roles allowed to pin messages in various channel types (deprecated in favor of channelCapabilities).

TypeDefault
objectdefaultPinPermissions

reactionSelectorRef#

Ref to be placed on the reaction selector component.

Type
React.MutableRefObject<HTMLDivElement>

readBy#

An array of users that have read the current message.

Type
array

renderText#

Custom function to render message text content.

TypeDefault
functionrenderText

setEditingState#

Function to toggle the editing state on a message.

Type
(event: React.BaseSyntheticEvent) => Promise<void> | void

showDetailedReactions#

When true, show the reactions list component.

Type
boolean

threadList#

If true, indicates that the current MessageList component is part of a Thread.

TypeDefault
booleanfalse

unsafeHTML#

If true, renders HTML instead of markdown. Posting HTML is only supported server-side.

TypeDefault
booleanfalse

Did you find this page helpful?