MessageBounceContext

MessageBounceContext is available inside the UI shown for messages bounced by moderation. It exposes the bounced message together with handlers for editing, retrying, or deleting that message.

Best Practices

Use the default bounce UI unless you need policy-specific copy or controls.
Always provide a safe path to resolve the bounced message: edit, retry, or delete.
Render MessageBounceProvider only for bounced messages.
Keep moderation copy concise and aligned with your community rules.
Prefer composer-based editing instead of building a separate edit form for bounced messages.

If you use the default message UI, you usually do not need to work with MessageBounceContext. If you replace MessageBouncePrompt or build a fully custom message UI, use useMessageBounceContext():

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

const CustomBouncePrompt = () => {
  const { handleDelete, handleEdit, handleRetry, message } =
    useMessageBounceContext();

  const onDelete = async () => {
    try {
      await handleDelete();
    } catch {
      // The SDK already shows its default delete error notification.
    }
  };

  return (
    <>
      <p>Message id: {message.id}</p>
      <button onClick={handleEdit}>Edit</button>
      <button onClick={handleRetry}>Retry</button>
      <button onClick={onDelete}>Delete</button>
    </>
  );
};

To replace the default prompt in a Channel subtree, register it with WithComponents:

import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
  WithComponents,
} from "stream-chat-react";

const App = () => (
  <WithComponents overrides={{ MessageBouncePrompt: CustomBouncePrompt }}>
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <Thread />
    </Channel>
  </WithComponents>
);

Usage In A Custom Message UI Component

If you build a message UI component from scratch, check whether the current message is bounced and render MessageBounceProvider only in that case:

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

const CustomMessage = () => {
  const { message } = useMessageContext();
  const bounced = isMessageBounced(message);

  return (
    <div className="message-wrapper">
      <MessageText />
      <MessageStatus />
      {bounced && (
        <MessageBounceProvider>
          <CustomBouncePrompt />
        </MessageBounceProvider>
      )}
    </div>
  );
};

Values

Value	Description	Type
`handleDelete`	Removes the bounced message from the current channel. Failed or unsent messages are removed locally, and server-side delete failures are rethrown after the SDK shows its default error notification.	`ReactEventHandler`
`handleEdit`	Loads the bounced message into the current message composer so the user can edit and resend it.	`ReactEventHandler`
`handleRetry`	Retries sending the bounced message without changing its contents.	`ReactEventHandler`
`message`	The bounced message object.	`LocalMessage`

MessageBounceContext

Best Practices

Basic Usage

Usage In A Custom Message UI Component

Values

Ask AI