MessageContext

MessageContext is created by Message and consumed by message UI components such as MessageUI, 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:

import { useMessageContext } from "stream-chat-react";

const CustomMessage = () => {
  const { getMessageActions, isMyMessage, message, threadList } =
    useMessageContext();

  return (
    <div>
      <div>{message.text}</div>
      <div>{isMyMessage() ? "mine" : "theirs"}</div>
      <div>{threadList ? "thread" : "channel"}</div>
      <div>{getMessageActions().join(", ")}</div>
    </div>
  );
};

Values