# Message

`Message` provides the logic and [`MessageContext`](https://getstream.io/chat/docs/sdk/react/components/contexts/message-context/) for a single message. The rendered UI is delegated to a message component such as `MessageUI` or your own custom message UI.

>
> **Note:** Most apps do not render `Message` directly. It is created by `MessageList`, `VirtualizedMessageList`, and `Thread`.
>

## Best Practices

- Treat `Message` as the logic layer and `MessageContext` as the source of truth for rendering.
- Set shared message UI defaults with `WithComponents`.
- Use list-level `Message` props when you need one-off customization for a single list.
- Keep custom message UIs based on `useMessageContext()` instead of assuming prop injection.
- Leave request/notification handling to the built-in message hooks unless you need custom behavior.

## Basic Usage

`Message` is usually configured indirectly through the surrounding list.

To set a shared default message UI for a `Channel` subtree, register it with `WithComponents`:

```tsx
import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
  WithComponents,
  useMessageContext,
} from "stream-chat-react";

const CustomMessage = () => {
  const { message } = useMessageContext();

  return <div>{message.text}</div>;
};

const App = () => (
  <WithComponents
    overrides={{
      Message: CustomMessage,
      VirtualMessage: CustomMessage,
    }}
  >
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);
```

If you only want to customize one list, use the list-level `Message` prop instead:

```tsx
import { MessageList, Thread, VirtualizedMessageList } from "stream-chat-react";

<MessageList Message={CustomMessage} />;
<Thread Message={CustomMessage} />;
<VirtualizedMessageList Message={CustomMessage} />;
```

## UI Customization

`Message` itself does not render the message bubble. It creates the `MessageContext` value and then renders the current message UI component.

Use:

- `WithComponents` to set subtree defaults for `Message` and `VirtualMessage`
- `MessageList`, `Thread`, or `VirtualizedMessageList` props for local overrides
- [`MessageContext`](https://getstream.io/chat/docs/sdk/react/components/contexts/message-context/) and the [message hooks](https://getstream.io/chat/docs/sdk/react/hooks/message-hooks/) inside custom UIs

## Props

| Prop                           | Description                                                                                     | Type                                            |
| ------------------------------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `autoscrollToBottom`           | Keeps a virtualized list pinned to the bottom when message height changes.                      | `() => void`                                    |
| `closeReactionSelectorOnClick` | Closes `ReactionSelector` after a reaction is chosen.                                           | `boolean`                                       |
| `deliveredTo`                  | Users who have confirmed delivery of the message.                                               | `UserResponse[]`                                |
| `disableQuotedMessages`        | Disables quote-message actions for this message.                                                | `boolean`                                       |
| `groupStyles`                  | Grouping styles for the message.                                                                | `GroupStyle[]`                                  |
| `highlighted`                  | Highlights and focuses the message when mounted.                                                | `boolean`                                       |
| `initialMessage`               | Marks the message as the first item in a thread list.                                           | `boolean`                                       |
| `lastOwnMessage`               | Latest own message in the currently rendered set.                                               | `LocalMessage`                                  |
| `lastReceivedId`               | Latest message ID in the current channel.                                                       | `string \| null`                                |
| `message`                      | Message object used to build the context value.                                                 | `LocalMessage`                                  |
| `Message`                      | Custom UI component to render for this message. Overrides the current `ComponentContext` value. | `React.ComponentType<MessageUIComponentProps>`  |
| `messageActions`               | Allowed message actions such as `edit`, `delete`, `reply`, or `react`.                          | `MessageActionsArray`                           |
| `messageListRect`              | DOM rect of the parent list.                                                                    | `DOMRect`                                       |
| `onMentionsClick`              | Custom mention click handler.                                                                   | `ChannelActionContextValue["onMentionsClick"]`  |
| `onMentionsHover`              | Custom mention hover handler.                                                                   | `ChannelActionContextValue["onMentionsHover"]`  |
| `onUserClick`                  | Custom user click handler.                                                                      | `UserEventHandler`                              |
| `onUserHover`                  | Custom user hover handler.                                                                      | `UserEventHandler`                              |
| `openThread`                   | Custom open-thread handler.                                                                     | `ChannelActionContextValue["openThread"]`       |
| `reactionDetailsSort`          | Sort options for loading reaction details.                                                      | `ReactionSort`                                  |
| `readBy`                       | Users who have read the message.                                                                | `UserResponse[]`                                |
| `renderText`                   | Custom text renderer used by `MessageText` or `StreamedMessageText`.                            | `MessageContextValue["renderText"]`             |
| `retrySendMessage`             | Custom retry-send handler.                                                                      | `ChannelActionContextValue["retrySendMessage"]` |
| `returnAllReadData`            | Keeps read receipts for every own message instead of only the latest one.                       | `boolean`                                       |
| `showAvatar`                   | Controls whether the message layout shows an avatar column.                                     | `boolean \| "incoming" \| "outgoing"`           |
| `sortReactions`                | Comparator for grouped reactions.                                                               | `ReactionsComparator`                           |
| `threadList`                   | Marks the message as part of a thread list.                                                     | `boolean`                                       |
| `unsafeHTML`                   | Renders HTML instead of markdown.                                                               | `boolean`                                       |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/message-components/message/](https://getstream.io/chat/docs/sdk/react/components/message-components/message/).