---
id: override_submit_handler
title: Input Submit Handler
---

import SubmitHandler from '../../assets/SubmitHandler.png';
import MessageCustomPayload from '../../assets/message-payload-custom-fields.png';

In this example, we demonstrate how to provide custom logic and override the [`MessageInput`](../../components/message-input-components/message-input.mdx)
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`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts)
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`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/hooks/useSubmitHandler.ts) function from the [`MessageInputContext`](../../components/contexts/message-input-context.mdx). 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`](../../components/core-components/channel.mdx) props `EditMessageInput` or `Input` respectively.
:::

The `overrideSubmitHandler` function receives three arguments, the message to be sent, the `cid` (channel type prepended to channel id)
for the currently active channel and optionally custom message data. The message object (the first argument) is of the following type:

```tsx
type MessageToSend = {
  attachments?: MessageAttachments;
  error?: ErrorFromResponse<APIErrorResponse>;
  errorStatusCode?: number;
  id?: string;
  mentioned_users?: UserResponse[];
  parent?: StreamMessage;
  parent_id?: string;
  status?: string;
  text?: string;
};
```

:::important
Call the `sendMessage` function from the [`ChannelActionContext`](../../components/contexts/channel-action-context.mdx#sendmessage) 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.

```tsx
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

```tsx
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

<img src={SubmitHandler} alt='Override Submit Handler' width='700' />

## Adding custom message data

If you would like to store custom data on your message objects, you can pass additional parameters to the [`sendMessage`](../../components/contexts/channel-action-context.mdx#sendmessage) function you retrieve from `ChannelActionContext`.

Now, the `overrideSubmitHandler` implementation may change as follows:

```tsx
import React from 'react';
import {
  ChannelHeader,
  MessageList,
  MessageInput,
  Window,
  MessageToSend,
  useChannelActionContext,
} from 'stream-chat-react';

const ChannelInner = () => {
  const { sendMessage } = useChannelActionContext();

  const overrideSubmitHandler = (message: MessageToSend, cid: string) => {
    sendMessage(message, { important: true });
  };

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

In your browser's Developer tools Network tab you can now observe, that the message payload includes the custom field:

<img src={MessageCustomPayload} alt={'Custom message payload'} />
