---
id: message_input_context
sidebar_position: 7
title: MessageInputContext
---

The `MessageInputContext` is established within the [`MessageInput`](../message-input-components/message-input.mdx) component.
The value is the combination of the `MessageInputProps`, `MessageInputState` (returned by the `useMessageInputState` hook), and `cooldownTimerState` (returned by the `useCooldownTimer hook`).
It provides data to the [Input UI](../message-input-components/input-ui.mdx) component and its children. Use the values stored
within this context to build a custom Input UI component. You can access the context values by calling the `useMessageInputContext`
custom hook.

## Basic Usage

Pull values from context with our custom hook:

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

## Values

### additionalTextareaProps

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

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

### attachments

An array of attachments added to the current message.

| Type         |
| ------------ |
| Attachment[] |

### autocompleteTriggers

A mapping of the current triggers permitted in the currently active channel.

| Type   | Default Triggers |
| ------ | ---------------- |
| object | `/` - commands   |
|        | `@` - mentions   |
|        | `:` - emojis     |

### cancelURLEnrichment

Function cancels all the scheduled or in-progress URL enrichment queries and resets the state.

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

### 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 |

### closeEmojiPicker

Function to close the `EmojiPicker` component.

| Type                                        |
| ------------------------------------------- |
| React.MouseEventHandler<HTMLButtonElement\> |

### closeEmojiPickerOnClick

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

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

### 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   |

### disableMentions

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

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

### dismissLinkPreview

Function called when a single link preview is dismissed.

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

### 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\> |

### emojiIndex

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

| Type        | Default                                                              |
| ----------- | -------------------------------------------------------------------- |
| constructor | [ComponentContext['EmojiIndex']](./component-context.mdx#emojiindex) |

### emojiPickerIsOpen

If true, signifies the `EmojiPicker` component is currently open.

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

### emojiPickerRef

React mutable ref placed on the `EmojiPicker` container `div`.

| Type                                    |
| --------------------------------------- |
| React.MutableRefObject<HTMLDivElement\> |

### 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 |

### fileOrder

The order in which file attachments have been added to the current message.

| Type     |
| -------- |
| string[] |

### fileUploads

A mapping of the file attachments added to the current message.

| Type                         |
| ---------------------------- |
| { [id: string]: FileUpload } |

### findAndEnqueueURLsToEnrich

A function responsible for initiating URL discovery and their subsequent enrichment. It is available only if link preview rendering is enabled. Link previews are disabled by default.

| Type                                              |
| ------------------------------------------------- |
| (text: string, mode?: SetLinkPreviewMode) => void |

### focus

If true, focuses the text input on component mount.

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

### grow

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

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

### handleChange

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

| Type                                           |
| ---------------------------------------------- |
| React.ChangeEventHandler<HTMLTextAreaElement\> |

### handleEmojiKeyDown

Opens the `EmojiPicker` component on Enter or Spacebar key down.

| Type                                         |
| -------------------------------------------- |
| React.KeyboardEventHandler<HTMLSpanElement\> |

### handleSubmit

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

| Type                                                                   |
| ---------------------------------------------------------------------- |
| (event: React.BaseSyntheticEvent, customMessageData?: Message) => 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   |

### imageOrder

The order in which image attachments have been added to the current message.

| Type     |
| -------- |
| string[] |

### imageUploads

A mapping of the image attachments added to the current message.

| Type                          |
| ----------------------------- |
| { [id: string]: ImageUpload } |

### insertText

Function to insert text into the value of the underlying `textarea` component.

| Type                           |
| ------------------------------ |
| (textToInsert: string) => void |

### isUploadEnabled

If true, file uploads are enabled in the currently active channel.

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

### linkPreviews

A Map of `LinkPreview` objects (a union type of `LinkPreviewState` and `OGAttachment`) indexed by string representing link URL. The link URL value is provided by `OGAttachment.og_scrape_url`.

| Type                       |
| -------------------------- |
| Map<LinkURL, LinkPreview\> |

### 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 |

### maxFilesLeft

The maximum number of allowed uploads minus the current number of uploads.

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

### 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   |

### mentioned_users

An array of users mentioned in the current message.

| Type           |
| -------------- |
| UserResponse[] |

### 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   |

### numberOfUploads

The number of file uploads on the current message.

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

### onPaste

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

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

### onSelectEmoji

Function that runs on select of an emoji in the `EmojiPicker` component.

| Type                       |
| -------------------------- |
| (emoji: EmojiData) => void |

### onSelectUser

Function that runs on select of a user in the suggestion list following an @mention.

| Type                         |
| ---------------------------- |
| (item: UserResponse) => void |

### openCommandsList

Function to manually open the list of supported slash commands.

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

### openEmojiPicker

Function to open the `EmojiPicker` component.

| Type                                      |
| ----------------------------------------- |
| React.MouseEventHandler<HTMLSpanElement\> |

### openMentionsList

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

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

### 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    |

### removeFile

Function to remove a file from the `fileUploads` mapping.

| Type                 |
| -------------------- |
| (id: string) => void |

### removeImage

Function to remove an image from the `imageUploads` mapping.

| Type                 |
| -------------------- |
| (id: string) => void |

### setCooldownRemaining

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

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

### setText

Function that overrides and sets the text value of the underlying `textarea` component.

| Type                   |
| ---------------------- |
| (text: string) => void |

### showCommandsList

If true, show the list of supported slash commands above the text input.

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

### showMentionsList

If true, show the list of potential users to mention above the text input.

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

### text

The current input value of the underlying `textarea` component.

| Type   |
| ------ |
| string |

### textareaRef

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

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

### uploadFile

Function to upload a file to the `fileUploads` mapping.

| Type                 |
| -------------------- |
| (id: string) => void |

### uploadImage

Function to upload an image.

| Type                 |
| -------------------- |
| (id: string) => void |

### uploadNewFiles

Function to upload an array of files to the `fileUploads` and `imageUploads` mappings.

| Type                                |
| ----------------------------------- |
| (files: FileList \| File[]) => 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   |
