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.

additionalMessageInputProps

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

autoscrollToBottom

Call this function to keep message list scrolled to the bottom when the message list container scroll height increases (only available in the VirtualizedMessageList). An example use case is that upon user’s interaction with the application, a new element appears below the last message. In order to keep the newly rendered content visible, the autoscrollToBottom function can be called. The container, however, is not scrolled to the bottom, if already scrolled up more than 4px from the bottom.

clearEditingState

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

customMessageActions

An object containing custom message actions (key) and function handlers (value). The key is used as a display text inside the button. Therefore, it should not be cryptic but rather bear the end user in mind when formulating it.

const customActions = {
  "Copy text": (message) => {
    navigator.clipboard.writeText(message.text || "");
  },
};

<MessageList customMessageActions={customActions} />;

Custom action item “Copy text” in the message actions box:

editing

If true, the message toggles to an editing state.

endOfGroup

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

firstOfGroup

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

formatDate

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

getMessageActions

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

groupedByUser

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

groupStyles

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

handleAction

Function that calls an action on a message.

handleDelete

Function that removes a message from the current channel.

handleEdit

Function that edits a message.

handleFetchReactions

Function that loads the reactions for a message.

This function limits the number of loaded reactions to 1200. To customize this behavior, you can pass a custom ReactionsList component.

handleFlag

Function that flags a message.

handleMarkUnread

Function that marks the message and all the following messages as unread in a channel.

handleMute

Function that mutes the sender of a message.

handleOpenThread

Function that opens a Thread on a message.

handlePin

Function that pins a message in the current channel.

handleReaction

Function that adds/removes a reaction on a message.

handleRetry

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

highlighted

Whether to highlight and focus the message on load.

initialMessage

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

isMyMessage

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

isReactionEnabled (deprecated)

If true, sending reactions is enabled in the currently active channel.

lastReceivedId

The latest message ID in the current channel.

message

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

messageListRect

DOMRect object linked to the parent MessageList component.

mutes

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

onMentionsClickMessage

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

onMentionsHoverMessage

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

onReactionListClick

Function that runs on click of the reactions list component.

onUserClick

Function that runs on click of a user avatar.

onUserHover

Function that runs on hover of a user avatar.

pinPermissions

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

reactionSelectorRef

Ref to be placed on the reaction selector component.

readBy

An array of users that have read the current message.

renderText

Custom function to render message text content.

setEditingState

Function to toggle the editing state on a message.

showDetailedReactions

When true, show the reactions list component.

sortReactionDetails

Comparator function to sort the list of reacted users. Should have the same signature as an array’s sort method.

sortReactions

Comparator function to sort reactions. Should have the same signature as an array’s sort method.

threadList

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

unsafeHTML

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