# MessageBounceContext

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`MessageBounceContext` holds a message that moderation bounced, with the three ways out of it: edit it, send it anyway, or delete it. `MessageBounceProvider` creates it for the message in [`MessageContext`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/messagecontext/). [Bounced messages](https://getstream.io/chat/docs/sdk/react/v15/features/messaging/sending-editing-and-deleting/#bounced-messages) explains what the user sees.

The default `MessageUI` renders the provider for you: clicking a bounced message opens a modal with `MessageBouncePrompt` inside `MessageBounceProvider`.

## Best practices

- Change the prompt with the `MessageBouncePrompt` override. It keeps the default modal and its provider.
- Render `MessageBounceProvider` yourself only in a custom message UI, and only for a message that `isMessageBounced(message)` accepts. For any other message it logs a warning.
- Inside the modal, close it after an action with `useModalContext().close()`, as the default prompt does.

## Basic usage

`MessageBouncePrompt` takes children, which replace its title and description and keep its three buttons. This prompt keeps the default buttons and changes the text:

```tsx
import type { MessageBouncePromptProps } from "stream-chat-react";
import { MessageBouncePrompt, WithComponents } from "stream-chat-react";

const GuidelinesBouncePrompt = (props: MessageBouncePromptProps) => (
  <MessageBouncePrompt {...props}>
    <p>This message breaks our community guidelines.</p>
  </MessageBouncePrompt>
);

const overrides = { MessageBouncePrompt: GuidelinesBouncePrompt };

export const App = () => (
  <WithComponents overrides={overrides}>
    {/* the rest of the app */}
  </WithComponents>
);
```

For a prompt with buttons of your own, read the handlers with `useMessageBounceContext()`. [Replacing the bounce prompt](https://getstream.io/chat/docs/sdk/react/v15/features/messaging/sending-editing-and-deleting/#replacing-the-bounce-prompt) has an example.

## Usage in a custom message UI

A custom `MessageUI` gets no bounce modal. Check the message with `isMessageBounced()` and render `MessageBounceProvider` around your own controls. These sit under the message text:

```tsx
import {
  isMessageBounced,
  MessageBounceProvider,
  MessageText,
  useMessageBounceContext,
  useMessageContext,
} from "stream-chat-react";

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

  return (
    <div className="bounce-actions">
      <button onClick={handleEdit} type="button">
        Edit
      </button>
      <button onClick={handleRetry} type="button">
        Send anyway
      </button>
      <button onClick={handleDelete} type="button">
        Delete
      </button>
    </div>
  );
};

export const CustomMessage = () => {
  const { message } = useMessageContext();

  return (
    <div className="custom-message">
      <MessageText />
      {isMessageBounced(message) && (
        <MessageBounceProvider>
          <BounceActions />
        </MessageBounceProvider>
      )}
    </div>
  );
};
```

`isMessageBounced(message)` is true for a message of type `error` whose moderation action is `bounce`.

## Values

| Value          | Type                | Description                                                                                                  |
| -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------ |
| `handleDelete` | `ReactEventHandler` | Removes the message from the channel's message list, without a request. A bounced reply stays in its thread. |
| `handleEdit`   | `ReactEventHandler` | Loads the message into the composer of the channel or thread, as the edit action does.                       |
| `handleRetry`  | `ReactEventHandler` | Sends the message again unchanged, through the message operations of the channel or thread.                  |
| `message`      | `LocalMessage`      | The bounced message.                                                                                         |

`ReactEventHandler` is React's event handler type. `handleEdit` calls `preventDefault()` on the event.

## Hooks

- `useMessageBounceContext()` returns the value. It throws outside a `MessageBounceProvider`.
- `useModalContext()` returns `close()` for the modal the prompt is in, and a `close()` that does nothing outside a modal.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/messagebouncecontext/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/messagebouncecontext/).