# 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:

```tsx
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.

```tsx
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:

```tsx
<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:

```tsx
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:

```tsx
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](/chat/docs/sdk/react/guides/theming/message_ui) guide.

## Values

### message

The object representing the message that got bounced.

| Type         |
| ------------ |
| LocalMessage |

### 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                                                                                        |
| ------------------------------------------------------------------------------------------- |
| (event: React.BaseSyntheticEvent, options?: DeleteMessageOptions) => Promise<void\> \| void |


---

This page was last updated at 2026-03-04T14:23:22.042Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/contexts/message_bounce_context/](https://getstream.io/chat/docs/sdk/react/components/contexts/message_bounce_context/).