Message Actions

In this example, we will demonstrate how to add a custom message action. By default, the component library supports the following message actions:

• delete
• edit
• flag
• mute
• pin
• quote
• react
• reply

The MessageList component accepts a prop called customMessageActions. This prop is an object type, with the key serving as the name of the action and the value as the handler function to be run on click.

In the simple example below, we'll add a custom option Yell, which will call a window alert on click.

note

The custom action handler receives both the message object and on click event as function arguments.

const yellActionHandler = (message: StreamMessage, event: React.BaseSyntheticEvent) => {
  // do something custom with the message and event
  window.alert('Yell Action Clicked!');
};

const customMessageActions = { Yell: yellActionHandler };

Once the mapping of custom actions has been created, pass it to the MessageList component.

const App = () => (
  <Chat client={client}>
    <Channel channel={channel}>
      <MessageList customMessageActions={customMessageActions} />
      <MessageInput />
    </Channel>
  </Chat>
);

The custom actions will display on top of the defaults in the message actions list.