MessageContext

MessageContext holds one message and the handlers that act on it. Message provides it, and the message UI and its parts (MessageText, MessageStatus, MessageActions, MessageReactions and the others) read it. Message UI explains how they fit together.

Best practices

  • Read the context with useMessageContext() in a custom message UI. The SDK renders the UI with no props.
  • Use the handlers instead of calling the client yourself. They update the message in the list, and inside a thread they act on the thread.
  • useMessageContext() throws outside a Message. A component that also renders outside a message can read useContext(MessageContext), which returns undefined there.

Basic usage

This message UI shows the text and a button that toggles a 👍 reaction:

import { MessageText, useMessageContext } from "stream-chat-react";

export const MessageWithLike = () => {
  const { handleReaction, isMyMessage, message } = useMessageContext();
  const liked = message.own_reactions?.some(({ type }) => type === "like");

  return (
    <div className={isMyMessage() ? "message message--mine" : "message"}>
      <MessageText />
      <button
        aria-pressed={liked}
        onClick={(event) => handleReaction("like", event)}
        type="button"
      >
        👍
      </button>
    </div>
  );
};

handleReaction adds the reaction, or removes it when the user already gave it. Register the component as the MessageUI override, as Message shows.

Values

Message fills every handler. The other values come from its props, which the lists set; Message says which list sets which.

Value Type Description
autoscrollToBottom () => void Keeps VirtualizedMessageList at the bottom after the message grows. Set only in that list.
closeReactionSelectorOnClick boolean Whether the reaction selector closes after a pick.
deliveredTo UserResponse[] The users the message was delivered to.
formatDate (date: Date) => string Formats the message's time and its edited-at tooltip.
groupStyles GroupStyle[] The message's place in a run of messages from one sender.
handleAction (dataOrName?: string | FormData, value?: string, event?: BaseSyntheticEvent) => Promise<void> | void Runs an attachment action, such as a Giphy preview's send, shuffle or cancel.
handleDelete (options?: DeleteMessageOptions) => Promise<void> | void Deletes the message through the message operations of the channel or thread. options go to the request.
handleFetchReactions (reactionType?: string, sort?: SortParamRequest[]) => Promise<ReactionResponse[]> Loads the message's reactions, 25 at a time, up to 1000. Pass a type to load only that type.
handleFlag ReactEventHandler Flags the message for moderation.
handleMarkUnread ReactEventHandler Marks the channel unread from this message on. Throws when the request fails.
handleMute ReactEventHandler Mutes the sender, or unmutes them when they're muted.
handleOpenThread ReactEventHandler Opens the message's thread through workspace navigation, or calls Message's openThread prop when set.
handlePin ReactEventHandler Pins the message, or unpins it when it's pinned. The list shows the change at once, and undoes it when the request fails.
handleReaction (reactionType: string, event: BaseSyntheticEvent) => Promise<void> Adds the reaction, or removes it when the user already gave it. The list shows the change at once, and undoes it when the request fails.
handleRetry (message: LocalMessage) => Promise<void> | void Sends a failed message again through the message operations of the channel or thread.
highlighted boolean Whether the message is the target of a jump.
isMessageAIGenerated (message: LocalMessage) => boolean The isMessageAIGenerated prop of Chat. The default MessageUI renders AI-generated text with StreamedMessageText.
isMyMessage () => boolean Whether the current user sent the message.
lastOwnMessage LocalMessage The user's latest message in the list.
lastReceivedId string | null The id of the latest message in the list with the status received.
message LocalMessage The message.
messageListRect DOMRect The bounding box of MessageList.
onMentionsClickMessage ReactEventHandler | undefined Calls the onMentionsClick of <Message/>, which <MessageList/> and <VirtualizedMessageList/> pass on, with (event, message), only when the message has mentions. undefined without that handler. <MessageText/> attaches it.
onMentionsHoverMessage ReactEventHandler | undefined The same for onMentionsHover.
onUserClick ReactEventHandler Calls the list's onUserClick with the sender. The default MessageUI attaches it to the avatar.
onUserHover ReactEventHandler The same for onUserHover.
reactionDetailsSort SortParamRequest[] The order of users in the reactions dialog.
readBy UserResponse[] The users who read the message.
renderText RenderTextFunction Renders the text. MessageText, QuotedMessage and StreamedMessageText use it.
returnAllReadData boolean Whether every own message shows read and delivery state.
setTranslationView (view: 'original' | 'translated') => void Shows the original text or the translation, for this user only. MessageTranslationIndicator uses it.
showAvatar boolean | 'incoming' | 'outgoing' Which messages get the avatar column. The default MessageUI falls back to 'incoming'.
sortReactions ReactionsComparator Orders the reaction types on the message.
translationView 'original' | 'translated' Which text MessageText shows. Defaults to the translation when the message has one.
unsafeHTML boolean Whether MessageText renders message.html, when the message has one, instead of the text. Message props says when it's safe to turn on.

ReactEventHandler is (event: BaseSyntheticEvent) => Promise<void> | void. handleFlag, handleMarkUnread, handleMute and handlePin call preventDefault() on it, so pass them the event of a click.

onMentionsClickMessage and onMentionsHoverMessage can be undefined. Pass them as event props, such as onClick={onMentionsClickMessage}, or call them with ?..

Hooks

  • useMessageContext() returns the value. It throws outside a Message.
  • useIsRenderedAsThreadParent() tells whether the message is the parent message of the thread it is rendered in.
  • Message hooks has the hooks the handlers are built from, for use outside a message.