Skip to main content

MessageInputContext

The MessageInputContext is established within the MessageInput 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 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:

const { autocompleteTriggers, handleSubmit } = useMessageInputContext();

Values#

additionalTextareaProps#

Additional props to be passed to the underlying AutoCompleteTextarea component, available props.

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.

TypeDefault Triggers
object/ - commands
@ - mentions
: - emojis

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>

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.

TypeDefault
booleanfalse

disableMentions#

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

TypeDefault
booleanfalse

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'.

TypeDefault
constructorComponentContext['EmojiIndex']

emojiPickerIsOpen#

If true, signifies the EmojiPicker component is currently open.

TypeDefault
booleanfalse

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 }

focus#

If true, focuses the text input on component mount.

TypeDefault
booleanfalse

grow#

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

TypeDefault
booleantrue

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

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.

TypeDefault
booleantrue

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.

TypeDefault
number10

mentionAllAppUsers#

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

TypeDefault
booleanfalse

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'.

TypeDefault
booleanfalse

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.

TypeDefault
booleantrue

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.

TypeDefault
booleanfalse

showMentionsList#

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

TypeDefault
booleanfalse

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

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

TypeDefault
booleanfalse

Did you find this page helpful?