---
id: message_input
sidebar_position: 1
title: MessageInput
---

The `MessageInput` component is a React Context provider that wraps all of the logic, functionality, and UI for the message input
displayed in a channel. It provides the [`MessageInputContext`](../contexts/message-input-context.mdx) to its children. All of
the input UI components consume the `MessageInputContext` and rely on the stored data for their display and interaction.

## Basic Usage

As a context consumer, the `MessageInput` component must be rendered as a child of the `Channel` component. `MessageInput` has
no required props and calls custom hooks to assemble the context values loaded into the `MessageInputContext` and provided
to its children.

:::note
If a custom input is not provided via the `Input` prop, [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx)
will be used by default.
:::

```jsx
<Chat client={client}>
  <ChannelList />
  <Channel>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>
```

## UI Customization

The `MessageInput` component does not inject any UI, so all input customization is handled by the [Input UI](./input-ui.mdx)
component. The Input UI component is passed as the `Input` prop into either the `Channel` or `MessageInput` component.

## Props

### additionalTextareaProps

Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize).

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

### clearEditingState

Function to clear the editing state while editing a message.

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

### closeEmojiPickerOnClick

If true, picking an emoji from the `EmojiPicker` component will close the picker.

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

### disabled

If true, disables the text input.

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

### disableMentions

If true, the suggestion list will not display and autocomplete @mentions.

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

### doFileUploadRequest

Function to override the default file upload request.

| Type                                                                          |
| ----------------------------------------------------------------------------- |
| (file: FileUpload['file'], channel: Channel) => Promise<SendFileAPIResponse\> |

### doImageUploadRequest

Function to override the default image upload request.

| Type                                                                           |
| ------------------------------------------------------------------------------ |
| (file: ImageUpload['file'], channel: Channel) => Promise<SendFileAPIResponse\> |

### errorHandler

Custom error handler function to be called with a file/image upload fails.

| Type                                                                                              |
| ------------------------------------------------------------------------------------------------- |
| (error: Error, type: string, file: (FileUpload \| ImageUpload)['file'] & { id?: string }) => void |

### focus

If true, focuses the text input on component mount.

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

### getDefaultValue

Generates the default value for the underlying textarea element. The function's return value takes precedence over `additionalTextareaProps.defaultValue`.

| Type                      |
| ------------------------- |
| () => string \| string[]) |

### grow

If true, expands the text input vertically for new lines.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### hideSendButton

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

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

### Input

Custom UI component handling how the message input is rendered.

| Type      | Default                                                                                                                         |
| --------- | ------------------------------------------------------------------------------------------------------------------------------- |
| component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) |

### maxRows

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

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

### mentionAllAppUsers

If true, the suggestion list will search all app users for an @mention, not just current channel members/watchers.

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

### mentionQueryParams

Object containing filters/sort/options overrides for an @mention user query.

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

### message

If provided, the existing message will be edited on submit.

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

### noFiles

If true, disables file uploads for all attachments except for those with type 'image'.

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

### overrideSubmitHandler

Function to override the default submit handler.

| Type                                          |
| --------------------------------------------- |
| (message: object, channelCid: string) => void |

### parent

When replying in a thread, the parent message object.

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

### publishTypingEvent

If true, triggers typing events on text input keystroke.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### shouldSubmit

Currently, `Enter` is the default submission key and `Shift`+`Enter` is the default combination for the new line.
If specified, this function overrides the default behavior specified previously.

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

:::note

### Migration from versions older than `9.0.0`

Property **keycodeSubmitKeys** has been replaced by **shouldSubmit** and thus is no longer supported.
If you had custom key codes specified like so:

```ts
keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0
```

then that would newly translate to:

```ts
const shouldSubmit = (event) =>
  (event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';

...

shouldSubmit={shouldSubmit}
```

:::

### urlEnrichmentConfig

Configuration parameters for link previews to customize:

- link discovery,
- what actions to execute on link preview card dismissal,
- what is the debounce interval after which the link enrichment queries are run

It also allows us to disable querying and rendering the link previews with `enrichURLForPreview` parameter.

| Type                |
| ------------------- |
| URLEnrichmentConfig |

```typescript
export type URLEnrichmentConfig = {
  /** Number of milliseconds to debounce firing the URL enrichment queries when typing. The default value is 1500(ms). */
  debounceURLEnrichmentMs?: number;
  /** Allows for toggling the URL enrichment and link previews in `MessageInput`. By default, the feature is disabled. */
  enrichURLForPreview?: boolean;
  /** Custom function to identify URLs in a string for later generation of link previews */
  findURLFn?: (text: string) => string[];
  /** Custom function to react to link preview dismissal */
  onLinkPreviewDismissed?: (linkPreview: LinkPreview) => void;
};
```

### useMentionsTransliteration

If true, will use an optional dependency to support transliteration in the input for mentions. See: https://github.com/sindresorhus/transliterate

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