Message

Message provides the logic and MessageContext for a single message. The rendered UI is delegated to a message component such as MessageSimple or your own custom message UI.

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:

import {
  Channel,
  ChannelHeader,
  MessageInput,
  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 />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);

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

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 and the message hooks inside custom UIs

Props

Message also accepts optional text-builder props for the default request notifications:

• getDeleteMessageErrorNotification
• getFetchReactionsErrorNotification
• getFlagMessageErrorNotification
• getFlagMessageSuccessNotification
• getMarkMessageUnreadErrorNotification
• getMarkMessageUnreadSuccessNotification
• getMuteUserErrorNotification
• getMuteUserSuccessNotification
• getPinMessageErrorNotification