---
id: message_bounce_context
sidebar_position: 11
title: 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:

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

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

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

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

```jsx
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](../../guides/theming/message-ui.mdx) 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 |
