# MessageContext
> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).
`MessageContext` holds one message and the handlers that act on it. [`Message`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/message/) provides it, and the message UI and its parts (`MessageText`, `MessageStatus`, `MessageActions`, `MessageReactions` and the others) read it. [A message](https://getstream.io/chat/docs/sdk/react/v15/ui/components/message-list-ui/#a-message) 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:
```tsx
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 (
);
};
```
`handleReaction` adds the reaction, or removes it when the user already gave it. Register the component as the `MessageUI` override, as [Message](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/message/#ui-customization) shows.
## Values
`Message` fills every handler. The other values come from its props, which the lists set; [Message](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/message/#props) 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. |
| `endOfGroup` | `boolean` | Read by the default `MessageUI`, which shows the metadata only on the last message of a group. The SDK's lists don't set it. |
| `firstOfGroup` | `boolean` | Read by the default `MessageUI` for a class name. The SDK's lists don't set it. |
| `formatDate` | `(date: Date) => string` | Formats the message's time and its edited-at tooltip. |
| `groupedByUser` | `boolean` | Read by the default `MessageUI` together with `endOfGroup`. The SDK's lists don't set it. |
| `groupStyles` | `GroupStyle[]` | The message's place in a run of messages from one sender. |
| `handleAction` | `(dataOrName?: string \| FormData, value?: string, event?: BaseSyntheticEvent) => Promise \| void` | Runs an attachment action, such as a Giphy preview's send, shuffle or cancel. |
| `handleDelete` | `(options?: DeleteMessageOptions) => Promise \| void` | Deletes the message through the message operations of the channel or thread. `options` go to the request. |
| `handleFetchReactions` | `(reactionType?: string, sort?: SortParamRequest[]) => Promise` | 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` | 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` | 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. |
| `initialMessage` | `boolean` | Whether the message is a thread's parent, shown above the replies. |
| `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` | Calls the list's `onMentionsClick` with the message's mentions. `MessageText` attaches it. |
| `onMentionsHoverMessage` | `ReactEventHandler` | 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. `Message` doesn't set it; the default `MessageUI` falls back to `'incoming'`. |
| `sortReactions` | `ReactionsComparator` | Orders the reaction types on the message. |
| `threadList` | `boolean` | Whether the message is in a thread's reply list. The SDK's lists don't set it. |
| `translationView` | `'original' \| 'translated'` | Which text `MessageText` shows. Defaults to the translation when the message has one. |
| `unsafeHTML` | `boolean` | Whether `MessageText` renders `message.html` instead of the text. |
`ReactEventHandler` is `(event: BaseSyntheticEvent) => Promise | void`. `handleFlag`, `handleMarkUnread`, `handleMute` and `handlePin` call `preventDefault()` on it, so pass them the event of a click.
## Hooks
- `useMessageContext()` returns the value. It throws outside a `Message`.
- [Message hooks](https://getstream.io/chat/docs/sdk/react/v15/reference/hooks/message-hooks/) has the hooks the handlers are built from, for use outside a message.
---
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/messagecontext/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/messagecontext/).