# MessageInputContext

`MessageInputContext` is created by [`MessageInput`](/chat/docs/sdk/react/v13/components/message-input-components/message_input/). It combines `MessageInputProps`, `MessageInputState` (from `useMessageInputState`), and `cooldownTimerState` (from `useCooldownTimer`). Use it to build custom Input UI components via `useMessageInputContext`.

## Best Practices

- Use context values in custom input components instead of duplicating state.
- Respect `cooldownRemaining` and `disabled` to prevent invalid submits.
- Avoid relying on deprecated `isThreadInput`; use composer state instead.
- Keep submit handlers focused and delegate heavy work to middleware.
- Close lists (`closeCommandsList`, `closeMentionsList`) on custom UI state changes.

## Basic Usage

Pull values from `MessageInputContext` with our custom hook:

```tsx
const { autocompleteTriggers, handleSubmit } = useMessageInputContext();
```

## Values

### additionalTextareaProps

Additional props to be consumed by the underlying `TextareaComposer` component.

```ts
type additionalTextareaProps = Omit<
  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
  "defaultValue" | "style" | "disabled" | "value"
>;
```

### clearEditingState

Function to clear the editing state while editing a message.

| Type       |
| ---------- |
| () => void |

### closeCommandsList

Function to manually close the list of supported slash commands.

| Type       |
| ---------- |
| () => void |

### closeMentionsList

Function to manually close the list of potential users to mention.

| Type       |
| ---------- |
| () => void |

### cooldownInterval

If slow mode is enabled, the required wait time between messages for each user.

| Type   |
| ------ |
| number |

### cooldownRemaining

If slow mode is enabled, the amount of time remaining before the connected user can send another message.

| Type   |
| ------ |
| number |

### disabled

If true, disables the text input.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### dismissLinkPreview

Function called when a single link preview is dismissed.

| Type                               |
| ---------------------------------- |
| (linkPreview: LinkPreview) => void |

### emojiSearchIndex

Custom class constructor to override default `NimbleEmojiIndex` from [emoji-mart](https://www.npmjs.com/package/emoji-mart).

| Type        | Default                                                                                                     |
| ----------- | ----------------------------------------------------------------------------------------------------------- |
| constructor | [ComponentContext['EmojiIndex']](/chat/docs/sdk/react/v13/components/contexts/component_context#emojiindex) |

### focus

If true, focuses the text input on component mount.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### handleSubmit

Function that runs onSubmit to the underlying `textarea` component.

| Type                                      |
| ----------------------------------------- |
| (event: React.BaseSyntheticEvent) => void |

### hideSendButton

Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`. Received from `MessageInputProps`.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### isThreadInput

Signals that the MessageInput is rendered in a message thread (Thread component).
This prop is deprecated. Use `messageComposer.threadId` to determine whether a thread reply is being composed.

| Type    |
| ------- |
| boolean |

### shouldSubmit

By default, `Enter` submits and `Shift+Enter` inserts a new line. Provide this function to override that behavior.

| Type                              |
| --------------------------------- |
| (event: KeyboardEvent) => boolean |

### maxRows

Max number of rows the underlying `textarea` component is allowed to grow.

| Type   | Default |
| ------ | ------- |
| number | 10      |

### minRows

Min number of rows the underlying `textarea` will start with.

| Type   | Default |
| ------ | ------- |
| number | 1       |

### onPaste

Function that runs onPaste to the underlying `textarea` component.

| Type                                                         |
| ------------------------------------------------------------ |
| `(event: React.ClipboardEvent<HTMLTextAreaElement>) => void` |

### overrideSubmitHandler

Function to override the default submit handler.

```ts
type overrideSubmitHandler = (params: {
  cid: string; // target channel CID
  localMessage: LocalMessage; // object representing the local message data used for UI update
  message: Message; // object representing the payload sent to the server for message creation / update
  sendOptions: SendMessageOptions;
}) => Promise<void> | void;
```

```tsx
import { MessageInput } from "stream-chat-react";
import type { MessageInputProps } from "stream-chat-react";

const CustomMessageInput = (props: MessageInputProps) => {
  const submitHandler: MessageInputProps["overrideSubmitHandler"] = useCallback(
    async (params: {
      cid: string;
      localMessage: LocalMessage;
      message: Message;
      sendOptions: SendMessageOptions;
    }) => {
      // custom logic goes here

      await sendMessage({ localMessage, message, options: sendOptions });
    },
    [sendMessage],
  );

  return (
    <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />
  );
};
```

### parent

When replying in a thread, the parent message object.

| Type   |
| ------ |
| object |

### setCooldownRemaining

React state hook function that sets the `cooldownRemaining` value.

| Type                                           |
| ---------------------------------------------- |
| `React.Dispatch<React.SetStateAction<number>>` |

### textareaRef

React mutable ref placed on the underlying `textarea` component.

| Type                                          |
| --------------------------------------------- |
| `React.MutableRefObject<HTMLTextAreaElement>` |


---

This page was last updated at 2026-04-21T07:55:47.351Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/contexts/message_input_context/](https://getstream.io/chat/docs/sdk/react/v13/components/contexts/message_input_context/).