Input Submit Handler

In this example, we demonstrate how to provide custom logic and override the MessageInput component's default submit handler function. Our custom handler function will bold any message text.

overrideSubmitHandler Prop

The MessageInput component accepts an overrideSubmitHandler prop, which allows you to add custom logic to the conclusion of the underlying textarea element's handleSubmit function.

note

You do not have to implement your custom submit handler, if the only thing you need is to pass custom message data to the underlying API call. In that case you can use the handleSubmit function from the MessageInputContext. The handleSubmit function allows you to pass custom message data through its second parameter customMessageData. This applies to sending a new message as well as updating an existing one. In order for this to work, you will have to implement custom message input components and pass them to Channel props EditMessageInput or Input respectively.

The overrideSubmitHandler function receives two arguments, the message to be sent and the cid (channel type prepended to channel id) for the currently active channel. The message object is of the following type:

type MessageToSend = {
  attachments?: MessageAttachments;
  errorStatusCode?: number;
  id?: string;
  mentioned_users?: UserResponse[];
  parent?: StreamMessage;
  parent_id?: string;
  status?: string;
  text?: string;
};

important

Call the sendMessage function from the ChannelActionContext within your custom function to ensure a message is sent to the active channel.

Custom Function

For this example, we will take the input text entered by the user and wrap it in two asterisks to render bold markdown. Once we've added the markdown characters, we call the sendMessage function with the updated message object.

const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
  const boldMessage = {
    ...message,
    text: `**${message.text}**`,
  };

  sendMessage(boldMessage);
};

Implementation

Now that we have our custom function, we can add the overrideSubmitHandler prop to the MessageInput component and begin sending bold text to our MessageList.

note

Since sendMessage is drawn from the ChannelActionContext, we must create an inner component that is a child of Channel and call the useChannelActionContext custom hook.

The Code

const ChannelInner: React.FC = () => {
  const { sendMessage } = useChannelActionContext();

  const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
    const boldMessage = {
      ...message,
      text: `**${message.text}**`,
    };

    sendMessage(boldMessage);
  };

  return (
    <>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput overrideSubmitHandler={overrideSubmitHandler} />
      </Window>
      <Thread />
    </>
  );
};

const App = () => (
  <Chat client={chatClient}>
    <ChannelList />
    <Channel>
      <ChannelInner />
    </Channel>
  </Chat>
);

The Result