MessageBounceContext

MessageBounceContext is available inside the modal shown for messages bounced by moderation. It provides callbacks to handle the bounced message.

Best Practices

• Use the default bounce UI unless you need policy-specific messaging.
• Always offer a safe path (edit/resend or delete) for bounced content.
• Wrap bounce UI with MessageBounceProvider only for bounced messages.
• Keep moderation copy concise and aligned with your community guidelines.
• Log or track bounce actions to inform moderation policies.

Basic Usage

If you use the default Message UI component, you won’t interact with MessageBounceContext. If you customize the Message UI component or provide a custom MessageBouncePrompt, use these callbacks.

Get values from MessageBounceContext with our custom hook:

const { message, handleEdit, handleSend, handleDelete } =
  useMessageBounceContext();

Use these callbacks to implement your custom MessageBouncePrompt. Typically it offers: edit and resend, resend unchanged (useful for “bounce then flag”), or delete.

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

function MyCustomMessageBouncePrompt({ onClose }) {
  const { message, handleEdit, handleSend, handleDelete } =
    useMessageBounceContext();
  return (
    <>
      <p>Your message is in violation of our community rules.</p>
      <p>Message id: "{message.id}"</p>
      <button
        type="button"
        onClick={() => {
          handleEdit();
          onClose();
        }}
      >
        Edit message
      </button>
      {/* ... */}
    </>
  );
}

Then override the default MessageBouncePrompt component with your custom one:

<Channel MessageBouncePrompt={MyCustomMessageBouncePrompt}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

Usage in a Custom Message UI Component

If you build a Message UI component from scratch, consider handling bounced messages, especially if you use “Bounce”, “Bounce then flag”, or “Bounce then block” moderation.

To do that, first check if the message is bounced:

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

function CustomMessage() {
  const { message } = useMessageContext();
  const isBounced = isMessageBounced(message);
  // ...
}

Then render custom UI for bounced messages. Wrap it with MessageBounceProvider so it can access the callbacks:

import {
  useMessageContext,
  isMessageBounced,
  MessageBounceProvider,
} from "stream-chat-react";

function MyCustomMessage() {
  const { message } = useMessageContext();
  const isBounced = isMessageBounced(message);

  return (
    <div className="message-wrapper">
      {/* ... */}
      <MessageText />
      <MessageStatus />
      {isBounced && (
        <MessageBounceProvider>
          <MyCustomMessageBouncePrompt />
        </MessageBounceProvider>
      )}
    </div>
  );
}

function MyCustomMessageBouncePrompt({ onClose }) {
  const { message, handleEdit, handleSend, handleDelete } =
    useMessageBounceContext();
  return (
    <>
      <button
        type="button"
        onClick={(e) => {
          handleEdit(e);
          onClose(e);
        }}
      >
        Edit message
      </button>
      {/* ... */}
    </>
  );
}

It only makes sense to render MessageBounceProvider in the context of a bounced message, so you'll see a warning in the browser console if you try to render it for any other type of message.

Implementing a custom Message UI component from scratch is a larger topic, covered by the Message UI Customization guide.

Values

message

The object representing the message that got bounced.

handleEdit

Call this function to switch the bounced message into editing mode.

handleSend

Call this function to try sending the bounced message again without changes.

handleDelete

Call this function to remove the bounced message from the message list.