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

## Basic Usage

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()`:

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

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

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


---

This page was last updated at 2026-05-22T16:32:13.447Z.

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/).