# MessageContext `MessageContext` is created by [`Message`](/chat/docs/sdk/react/components/message-components/message/) and consumed by message UI components such as `MessageSimple`, `MessageStatus`, and your own custom message components. ## Best Practices - Use `useMessageContext()` inside message UI instead of passing message data through props. - Prefer `getMessageActions()` over hard-coding action availability. - Use `autoscrollToBottom` only for user-triggered layout changes in virtualized lists. - Keep custom rendering logic focused on UI; let the built-in handlers perform channel actions. - Treat `handleDelete()` as async in custom UIs and catch failures if your app needs extra recovery. - Treat edit flows as part of the message composer, not as local message state. - Treat pinning as capability-driven. `MessageContext` no longer carries a `pinPermissions` override. ## Basic Usage Pull values from `MessageContext` with the `useMessageContext` hook: ```tsx import { useMessageContext } from "stream-chat-react"; const CustomMessage = () => { const { getMessageActions, isMyMessage, message, threadList } = useMessageContext(); return (
{message.text}
{isMyMessage() ? "mine" : "theirs"}
{threadList ? "thread" : "channel"}
{getMessageActions().join(", ")}
); }; ``` ## Values | Value | Description | Type | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | `actionsEnabled` | Whether message actions are enabled for the message. | `boolean` | | `autoscrollToBottom` | Keeps a virtualized list pinned to the bottom when message height changes. | `() => void` | | `closeReactionSelectorOnClick` | Whether `ReactionSelector` should close after a choice is made. | `boolean` | | `deliveredTo` | Users who have confirmed device delivery. | `UserResponse[]` | | `endOfGroup` | Whether the message is the last item in its visual group. | `boolean` | | `firstOfGroup` | Whether the message is the first item in its visual group. | `boolean` | | `formatDate` | Custom date formatter used by message timestamp components. | `(date: Date) => string` | | `getMessageActions` | Returns the allowed actions for the current message. | `() => MessageActionsArray` | | `groupedByUser` | Whether the surrounding virtualized list groups messages by user. | `boolean` | | `groupStyles` | Grouping styles applied to the message. | `GroupStyle[]` | | `handleAction` | Executes a message action. | `(dataOrName?: string \| FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise` | | `handleDelete` | Deletes the current message. For unsent or network-failed messages, it removes the message locally instead. Delete failures are rethrown after the SDK notifies the user. | `(options?: DeleteMessageOptions) => Promise \| void` | | `handleFetchReactions` | Loads reactions for the current message. | `(reactionType?: ReactionType, sort?: ReactionSort) => Promise` | | `handleFlag` | Flags the message. | `ReactEventHandler` | | `handleMarkUnread` | Marks the message and following messages unread. | `ReactEventHandler` | | `handleMute` | Mutes the message sender. | `ReactEventHandler` | | `handleOpenThread` | Opens the thread for the current message. | `ReactEventHandler` | | `handlePin` | Pins or unpins the message. | `ReactEventHandler` | | `handleReaction` | Adds or removes a reaction. | `(reactionType: string, event: React.BaseSyntheticEvent) => Promise` | | `handleRetry` | Retries sending a failed message. | `ChannelActionContextValue["retrySendMessage"]` | | `highlighted` | Whether the message should be highlighted on load. | `boolean` | | `initialMessage` | Whether the message is the thread parent in a thread list. | `boolean` | | `isMessageAIGenerated` | Optional AI-message detection function from `Chat`. | `(message: LocalMessage) => boolean` | | `isMyMessage` | Returns whether the message belongs to the connected user. | `() => boolean` | | `lastOwnMessage` | The latest own message in the currently rendered set. | `LocalMessage` | | `lastReceivedId` | Latest message ID in the current channel. | `string \| null` | | `message` | The current message object. | `LocalMessage` | | `messageIsUnread` | Whether the message is currently unread for the connected user. | `boolean` | | `messageListRect` | DOM rect of the surrounding message list. | `DOMRect` | | `mutes` | Muted users from the current channel state. | `Mute[]` | | `onMentionsClickMessage` | Mention click handler used by message text. | `ReactEventHandler` | | `onMentionsHoverMessage` | Mention hover handler used by message text. | `ReactEventHandler` | | `onUserClick` | Handler for clicking the message sender. | `ReactEventHandler` | | `onUserHover` | Handler for hovering the message sender. | `ReactEventHandler` | | `reactionDetailsSort` | Sort options for loading reaction details. | `ReactionSort` | | `readBy` | Users who have read the message. | `UserResponse[]` | | `renderText` | Custom text renderer used by `MessageText` and `StreamedMessageText`. | `MessageContextValue["renderText"]` | | `returnAllReadData` | Whether read data should be kept for every own message. | `boolean` | | `setTranslationView` | Updates the translation mode for this message. | `(view: "original" \| "translated") => void` | | `showAvatar` | Avatar display mode used by the current message UI. | `boolean \| "incoming" \| "outgoing"` | | `sortReactions` | Comparator for grouped reactions. | `ReactionsComparator` | | `threadList` | Whether the message is being rendered in a thread list. | `boolean` | | `translationView` | Current translation mode for the message text. | `"original" \| "translated"` | | `unsafeHTML` | Whether the current message should render HTML instead of markdown. | `boolean` | --- This page was last updated at 2026-05-22T16:32:13.442Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/contexts/message-context/](https://getstream.io/chat/docs/sdk/react/components/contexts/message-context/).