MessageContext

MessageContext holds one message and the handlers that act on it. Message provides it, and the message UI and its parts (MessageText, MessageStatus, MessageActions, MessageReactions and the others) read it. 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:

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 (
    <div className={isMyMessage() ? "message message--mine" : "message"}>
      <MessageText />
      <button
        aria-pressed={liked}
        onClick={(event) => handleReaction("like", event)}
        type="button"
      >
        👍
      </button>
    </div>
  );
};

handleReaction adds the reaction, or removes it when the user already gave it. Register the component as the MessageUI override, as Message shows.

Values

Message fills every handler. The other values come from its props, which the lists set; Message says which list sets which.

ReactEventHandler is (event: BaseSyntheticEvent) => Promise<void> | 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 has the hooks the handlers are built from, for use outside a message.