MessageBounceContext

The MessageBounceContext is available inside the modal rendered by the default message component for messages that got bounced by the moderation rules. This context provides callbacks that can be used to deal with the bounced message.

Basic Usage

In most cases when using the default Message UI component implementation you are not going to deal with the MessageBounceContext directly. However if you are customizing the Message UI component, or providing a custom MessageBouncePrompt, the callbacks provided by this context come in handy.

Get values from context with our custom hook:

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

Use these callbacks to implement your custom MessageBouncePrompt. Normally this component displays three options: edit the message before sending it again, send the message again without changes (this can be useful if you are using the "Bounce then flag" moderation flow), and delete the message.

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

When implementing your own Message component from scratch, you should consider implementing UI for bounced messages, especially if you are using one of the moderation flows with message bouncing ("Bounce", "Bounce then flag", or "Bounce then block").

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, display custom UI in case the message is bounced. Don't forget to wrap the UI with the MessageBounceProvider, so that it has access to the callbacks used to deal with the bounced message:

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.

Type
StreamMessage

handleEdit

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

Type
ReactEventHandler

handleSend

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

Type
ReactEventHandler

handleDelete

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

Type
ReactEventHandler