# Message

`Message` is a context provider for a single message. It exposes [`MessageContext`](/chat/docs/sdk/react/v13/components/contexts/message_context/) to its children, which message UI components consume.

<admonition type="note">

Most apps won’t use `Message` directly. It’s primarily internal, and custom message UI (passed via `Channel`/`MessageList`) consumes the context.

</admonition>

## Best Practices

- Customize message UI via `MessageList`/`Channel` before using `Message` directly.
- Keep message-level overrides small to avoid complex prop threading.
- Use `MessageContext` values instead of re-fetching message data.
- Preserve default message grouping behavior unless your UX requires changes.
- Avoid direct DOM manipulation inside message components.

## Basic Usage

`Message` is used internally by `MessageList`, which passes each `message` into it. You only need to import it for advanced or custom cases.

## UI Customization

`Message` doesn’t render UI. Customize rendering via the [Message UI component](/chat/docs/sdk/react/v13/components/message-components/message_ui/) passed to `Channel` or `MessageList`.

## Props

### message

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

| Type   |
| ------ |
| object |

### additionalMessageInputProps

Additional props to be passed to the underlying `MessageInput` component, [available props](/chat/docs/sdk/react/v13/components/message-input-components/message_input/#props/). It is rendered when editing a message.

| Type   |
| ------ |
| object |

### 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. The function is provided by the SDK and is not inteded for customization.

| Type       |
| ---------- |
| () => void |

### closeReactionSelectorOnClick

If true, picking a reaction from the `ReactionSelector` component will close the selector.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### customMessageActions

An object containing custom message actions (key) and function handlers (value). For each custom action a dedicated item (button) in [`MessageActionsBox`](/chat/docs/sdk/react/v13/components/message-components/message_ui/) is rendered. 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.

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

<MessageList customMessageActions={customActions} />;
```

Custom action item "Copy text" in the message actions box:

![Image of a custom action item ](@chat-sdk/react/v13/_assets/message-actions-box-custom-actions.png)

| Type   |
| ------ |
| object |

### deliveredTo

An array of user IDs that have confirmed the message delivery to their device.

| Type             |
| ---------------- |
| `UserResponse[]` |

### disableQuotedMessages

If true, disables the ability for users to quote messages.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### endOfGroup

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

| Type    |
| ------- |
| boolean |

### firstOfGroup

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

| Type    |
| ------- |
| boolean |

### formatDate

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

| Type                   |
| ---------------------- |
| (date: Date) => string |

### getDeleteMessageErrorNotification

Function that returns the notification text to be displayed when a delete message request fails. This function receives the
deleted [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getFetchReactionsErrorNotification

Function that returns the notification text to be displayed when loading message reactions fails. This function receives the
current [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getFlagMessageErrorNotification

Function that returns the notification text to be displayed when a flag message request fails. This function receives the
flagged [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getFlagMessageSuccessNotification

Function that returns the notification text to be displayed when a flag message request succeeds. This function receives the
flagged [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getMarkMessageUnreadErrorNotification

Function that returns the notification text to be displayed when a mark message unread request fails. This function receives the
marked [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getMarkMessageUnreadSuccessNotification

Function that returns the notification text to be displayed when a mark message unread request succeeds. This function receives the
marked [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### getMuteUserErrorNotification

Function that returns the notification text to be displayed when a mute user request fails. This function receives the
muted [user object](/chat/docs/javascript/update_users/) as its argument.

| Type                           |
| ------------------------------ |
| (user: UserResponse) => string |

### getMuteUserSuccessNotification

Function that returns the notification text to be displayed when a mute user request succeeds. This function receives the
muted [user object](/chat/docs/javascript/update_users/) as its argument.

| Type                           |
| ------------------------------ |
| (user: UserResponse) => string |

### getPinMessageErrorNotification

Function that returns the notification text to be displayed when a pin message request fails. This function receives the
pinned [message object](/chat/docs/javascript/send_message/) as its argument.

| Type                              |
| --------------------------------- |
| (message: LocalMessage) => string |

### groupedByUser

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### groupStyles

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

| Type     | Options                                         |
| -------- | ----------------------------------------------- |
| string[] | '' \| 'middle' \| 'top' \| 'bottom' \| 'single' |

### highlighted

Whether to highlight and focus the message on load. Used internally in the process of [jumping to a message](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#jumptomessage/).

| Type    |
| ------- |
| boolean |

### initialMessage

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### lastReceivedId

The latest message ID in the current channel.

| Type   |
| ------ |
| string |

### Message

Custom UI component to display a message.

| Type      | Default                                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------------------- |
| component | [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) |

### messageActions

Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.

| Type  | Default                                                                                                        |
| ----- | -------------------------------------------------------------------------------------------------------------- |
| array | ['edit', 'delete', 'flag', 'markUnread', 'mute', 'pin', 'quote', 'react', 'remindMe', 'reply', 'saveForLater'] |

It is also possible to display actions that are by default supported by the SDK, but not active by default:

```tsx
import {
  Message,
  MESSAGE_ACTIONS,
  OPTIONAL_MESSAGE_ACTIONS,
} from "stream-chat-react";

const messageActions = [
  ...Object.keys(MESSAGE_ACTIONS),
  OPTIONAL_MESSAGE_ACTIONS.deleteForMe, // has to be explicitly added to the messageActions array
];

<Message messageActions={messageActions} />;
```

### messageListRect

DOMRect object linked to the parent wrapper div around the `InfiniteScroll` component.

| Type    |
| ------- |
| DOMRect |

### onlySenderCanEdit

If true, only the sender of the message has editing privileges. If `false` also channel capability `update-any-message` has to be enabled in order a user can edit other users' messages.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### onMentionsClick

Custom action handler function to run on click of a @mention in a message.

| Type     | Default                                                                                                                             |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| function | [ChannelActionContextValue['onMentionsClick']](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#onmentionsclick) |

### onMentionsHover

Custom action handler function to run on hover over a @mention in a message.

| Type     | Default                                                                                                                             |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| function | [ChannelActionContextValue['onMentionsHover']](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#onmentionshover) |

### onUserClick

Custom action handler function to run on click of user avatar.

| Type                                                  |
| ----------------------------------------------------- |
| (event: React.BaseSyntheticEvent, user: User) => void |

### onUserHover

Custom action handler function to run on hover of user avatar.

| Type                                                  |
| ----------------------------------------------------- |
| (event: React.BaseSyntheticEvent, user: User) => void |

### openThread

Custom action handler to open a [`Thread`](/chat/docs/sdk/react/v13/components/core-components/thread/) component.

| Type     | Default                                                                                                                   |
| -------- | ------------------------------------------------------------------------------------------------------------------------- |
| function | [ChannelActionContextValue['openThread']](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#openthread) |

### pinPermissions

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

| Type   | Default                                                                                                              |
| ------ | -------------------------------------------------------------------------------------------------------------------- |
| object | [defaultPinPermissions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/utils.tsx) |

### readBy

An array of users that have read the current message.

| Type  |
| ----- |
| array |

### renderText

Custom function to render message text content.

| Type     | Default                                                                                                                   |
| -------- | ------------------------------------------------------------------------------------------------------------------------- |
| function | [renderText](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/renderText/renderText.tsx) |

### retrySendMessage

Custom action handler to retry sending a message after a failed request.

| Type     | Default                                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| function | [ChannelActionContextValue['retrySendMessage']](/chat/docs/sdk/react/v13/components/contexts/channel_action_context#retrysendmessage) |

### reactionDetailsSort

Sort options to provide to a reactions query. Affects the order of reacted users in the default reactions modal.

| Type                     | Default                     |
| ------------------------ | --------------------------- |
| `{ created_at: number }` | reverse chronological order |

### sortReactions

Comparator function to sort reactions. Should have the same signature as the `sort` method for a string array.

| Type                                                     | Default             |
| -------------------------------------------------------- | ------------------- |
| (this: ReactionSummary, that: ReactionSummary) => number | chronological order |

### threadList

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### unsafeHTML

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |


---

This page was last updated at 2026-04-21T07:55:45.072Z.

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