Customize the message context menu | Chat React SDK

Chat UIKit React v3

Chat UIKit React

Chat UIKit

React

Version 3

A long tab on a message object in the chat view can reveal a list of action items that can be perform on the message. Customize the message's context menu in the Chat View using

This guide demonstrates how to:

Web

Mobile

Web

On the web-based client app, an option button on a message can reveal a list of action items that can be performed on the message as shown in the image below.

The following code snippets show how to add or remove a Delete button to and from the context menu.

JavaScript

import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MessageMenu, MenuItem } from '@sendbird/uikit-react/ui/MessageMenu';

const GroupChannelPage = () => (
  <GroupChannel
    channelUrl="CHANNEL_URL"
    renderMessageContent={(props) => (
      <MessageContent {...props} renderMessageMenu={(menuProps) => (
        <MessageMenu {...menuProps} renderMenuItems={(props) => {
          const { message, channel } = menuProps;
          const { DeleteMenuItem } = props.items;
          return (
            <>
              {/* Make your own menu item */}
              <MenuItem 
                onClick={() => {}}>NEW MENU ITEM</MenuItem>
              {/* Change the inner content of the menu item */}
              <DeleteMenuItem>DELETE</DeleteMenuItem>
            </>
          );
        }} />
      )} />
    )}
  />
);

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdProvider
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        appId={'YOUR_APP_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'kat2'}
      >
      <GroupChannelPage />
      </SendbirdProvider>
    </div>
  )
}

export default App;

props.items in MessageMenu contain a list of long-tab menu items our UIKit for React supports on a mobile device. The following code snippet demonstrates how to move the Copy button to the top of the context menu, followed by a Reply and a Delete button.

JavaScript

import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MessageMenu } from '@sendbird/uikit-react/ui/MessageMenu';

const GroupChannelPage = () => (
  <GroupChannel
    channelUrl="CHANNEL_URL"
    renderMessageContent={(contentProps) => (
      <MessageContent {...contentProps} renderMessageMenu={(props) => (
        <MessageMenu {...props} renderMenuItems={(props) => {
          const { message } = contentProps;
          // A complete list of all built-in menu item components.
          const {
            CopyMenuItem,
            ReplyMenuItem,
            ThreadMenuItem,
            OpenInChannelMenuItem,
            EditMenuItem,
            ResendMenuItem,
            DeleteMenuItem,
          } = props.items;
          // Customize your menu items here. For example, Copy -> Reply -> Delete.
          return (
            <>
              {message.messageType === 'user' && (
                <>
                  <CopyMenuItem />
                  <ReplyMenuItem />
                </>
              )}
              <DeleteMenuItem />
            </>
          );
        }} />
      )} />
    )}
  />
);

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdProvider
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        appId={'YOUR_APP_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'kat2'}
      >
      <GroupChannelPage />
      </SendbirdProvider>
    </div>
  )
}

export default App;

Each built-in context menu item component is a ReactElement, which allows you to fully customize its children. For example, if you'd like to add an Icon to the Delete button, you can easily achieve this by passing custom children.

Here's how you can do it:

JavaScript

<DeleteMenuItem>
  {/* Customize the children */} 
  <div
    style={{
      display: "flex",
      alignItems: "center",
      flexDirection: "row",
      gap: 8,
    }}
  >
    <Icon type="DELETE" />
    <span>Delete</span>
  </div>
</DeleteMenuItem>

In this example, the DeleteMenuItem component is enhanced with an Icon alongside the "Delete" label. The styling ensures proper alignment and spacing, resulting in a polished and functional menu item.

Mobile

On the mobile platform, message menu items can be rendered as a bottom sheet or a box of items triggered by a long tab. For the bottom sheet, use MobileBottomSheet so that the menu list appears at the bottom of the screen. On the other hand, you can utilize MobileContextMenu to customize the context menu that appears in a box.

MobileContextMenuMobileBottomSheet

import SendbirdProvider  from '@sendbird/uikit-react/SendbirdProvider';
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MobileContextMenu } from '@sendbird/uikit-react/ui/MobileMenu';
import { MenuItem } from '@sendbird/uikit-react/ui/MessageMenu';

const GroupChannelPage = () => (
  <GroupChannel
    channelUrl="CHANNEL_URL"
    renderMessageContent={(props) => (
      <MessageContent {...props} renderMobileMenuOnLongPress={(menuProps) => (
        <MobileContextMenu {...menuProps} renderMenuItems={(props) => {
          const { message, channel } = menuProps;
          const { DeleteMenuItem } = props.items;
          return (
            <>
              {/* Make your own menu item */}
              <MenuItem onClick={() => {}}>NEW MENU ITEM</MenuItem>
              {/* Change the inner content of the menu item */}
              <DeleteMenuItem>DELETE</DeleteMenuItem>
            </>
          );
        }} />
      )} />
    )}
  />
);

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdProvider
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        appId={'YOUR_APP_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'kat2'}
        breakpoint={true}
      >
      <GroupChannelPage />
      </SendbirdProvider>
    </div>
  )
}

export default App;

props.items in MobileMenu contain a list of long-tab menu items our UIKit for React supports on a mobile device. The following code snippet demonstrates how to move the Copy button to the top of the context menu, followed by a Reply and a Delete button.

JavaScript

import SendbirdProvider  from '@sendbird/uikit-react/SendbirdProvider';
import GroupChannel from '@sendbird/uikit-react/GroupChannel';
import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
import { MobileMenu } from '@sendbird/uikit-react/ui/MobileMenu';

const GroupChannelPage = () => (
  <GroupChannel
    channelUrl="CHANNEL_URL"
    renderMessageContent={(contentProps) => (
      <MessageContent {...contentProps} renderMobileMenuOnLongPress={(props) => (
        <MobileMenu {...props} renderMenuItems={(props) => {
          const { message } = contentProps;
          const {
            CopyMenuItem,
            ReplyMenuItem,
            ThreadMenuItem,
            OpenInChannelMenuItem,
            EditMenuItem,
            ResendMenuItem,
            DeleteMenuItem,
          } = props.items;
          // Customize your menu items here. For example, Copy -> Reply -> Delete.
          return (
            <>
              {message.messageType === 'user' && (
                <>
                  <CopyMenuItem />
                  <ReplyMenuItem />
                </>
              )}
              <DeleteMenuItem />
            </>
          );
        }} />
      )} />
    )}
  />
);

function App() {
  return (
    // The chat interface can expand up to the dimensions of your parent component.
    // To achieve a full-screen mode, apply the following CSS rules to the parent element.
    <div style={{ width:'100vw', height:'100vh' }}>
      <SendbirdProvider
        // You can find your Sendbird application ID on the Sendbird dashboard. 
        appId={'YOUR_APP_ID'}
        // Specify the user ID you've created on the dashboard.
        // Or you can create a user by specifying a unique userId.  
        userId={'kat2'}
        breakpoint={true}
      >
      <GroupChannelPage />
      </SendbirdProvider>
    </div>
  )
}

export default App;

On this page

Web

Add or remove a context menu item Change the order of context menu items Customizing Context Menu Items

Mobile

Add or remove a context menu item Change the order of context menu items

Sample app