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 UsagePull values from context with our custom hook:
const { autocompleteTriggers, handleSubmit } = useMessageInputContext();
#
Values#
additionalTextareaPropsAdditional props to be passed to the underlying AutoCompleteTextarea
component, available props.
Type |
---|
object |
#
attachmentsAn array of attachments added to the current message.
Type |
---|
Attachment[] |
#
autocompleteTriggersA mapping of the current triggers permitted in the currently active channel.
Type | Default Triggers |
---|---|
object | / - commands |
@ - mentions | |
: - emojis |
#
clearEditingStateFunction to clear the editing state while editing a message.
Type |
---|
() => void |
#
closeCommandsListFunction to manually close the list of supported slash commands.
Type |
---|
() => void |
#
closeEmojiPickerFunction to close the EmojiPicker
component.
Type |
---|
React.MouseEventHandler<HTMLButtonElement> |
#
closeMentionsListFunction to manually close the list of potential users to mention.
Type |
---|
() => void |
#
cooldownIntervalIf slow mode is enabled, the required wait time between messages for each user.
Type |
---|
number |
#
cooldownRemainingIf slow mode is enabled, the amount of time remaining before the connected user can send another message.
Type |
---|
number |
#
disabledIf true, disables the text input.
Type | Default |
---|---|
boolean | false |
#
disableMentionsIf true, the suggestion list will not display and autocomplete @mentions.
Type | Default |
---|---|
boolean | false |
#
doFileUploadRequestFunction to override the default file upload request.
Type |
---|
(file: FileUpload['file'], channel: Channel) => Promise<SendFileAPIResponse> |
#
doImageUploadRequestFunction to override the default image upload request.
Type |
---|
(file: ImageUpload['file'], channel: Channel) => Promise<SendFileAPIResponse> |
#
emojiIndexCustom class constructor to override default NimbleEmojiIndex
from 'emoji-mart'.
Type | Default |
---|---|
constructor | ComponentContext['EmojiIndex'] |
#
emojiPickerIsOpenIf true, signifies the EmojiPicker
component is currently open.
Type | Default |
---|---|
boolean | false |
#
emojiPickerRefReact mutable ref placed on the EmojiPicker
container div
.
Type |
---|
React.MutableRefObject<HTMLDivElement> |
#
errorHandlerCustom error handler function to be called with a file/image upload fails.
Type |
---|
(error: Error, type: string, file: (FileUpload | ImageUpload)['file'] & { id?: string }) => void |
#
fileOrderThe order in which file attachments have been added to the current message.
Type |
---|
string[] |
#
fileUploadsA mapping of the file attachments added to the current message.
Type |
---|
{ [id: string]: FileUpload } |
#
focusIf true, focuses the text input on component mount.
Type | Default |
---|---|
boolean | false |
#
growIf true, expands the text input vertically for new lines.
Type | Default |
---|---|
boolean | true |
#
handleChangeFunction that runs onChange to the underlying textarea
component.
Type |
---|
React.ChangeEventHandler<HTMLTextAreaElement> |
#
handleEmojiKeyDownOpens the EmojiPicker
component on Enter or Spacebar key down.
Type |
---|
React.KeyboardEventHandler<HTMLSpanElement> |
#
handleSubmitFunction that runs onSubmit to the underlying textarea
component.
Type |
---|
(event: React.BaseSyntheticEvent, customMessageData?: Message) => void |
#
imageOrderThe order in which image attachments have been added to the current message.
Type |
---|
string[] |
#
imageUploadsA mapping of the image attachments added to the current message.
Type |
---|
{ [id: string]: ImageUpload } |
#
insertTextFunction to insert text into the value of the underlying textarea
component.
Type |
---|
(textToInsert: string) => void |
#
isUploadEnabledIf true, file uploads are enabled in the currently active channel.
Type | Default |
---|---|
boolean | true |
#
shouldSubmitCurrently, 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 |
#
maxFilesLeftThe maximum number of allowed uploads minus the current number of uploads.
Type |
---|
number |
#
maxRowsMax number of rows the underlying textarea
component is allowed to grow.
Type | Default |
---|---|
number | 10 |
#
mentionAllAppUsersIf true, the suggestion list will search all app users for an @mention, not just current channel members/watchers.
Type | Default |
---|---|
boolean | false |
#
mentioned_usersAn array of users mentioned in the current message.
Type |
---|
UserResponse[] |
#
mentionQueryParamsObject containing filters/sort/options overrides for an @mention user query.
Type |
---|
object |
#
messageIf provided, the existing message will be edited on submit.
Type |
---|
object |
#
noFilesIf true, disables file uploads for all attachments except for those with type 'image'.
Type | Default |
---|---|
boolean | false |
#
numberOfUploadsThe number of file uploads on the current message.
Type |
---|
number |
#
onPasteFunction that runs onPaste to the underlying textarea
component.
Type |
---|
(event: React.ClipboardEvent<HTMLTextAreaElement>) => void |
#
onSelectEmojiFunction that runs on select of an emoji in the EmojiPicker
component.
Type |
---|
(emoji: EmojiData) => void |
#
onSelectUserFunction that runs on select of a user in the suggestion list following an @mention.
Type |
---|
(item: UserResponse) => void |
#
openCommandsListFunction to manually open the list of supported slash commands.
Type |
---|
() => void |
#
openEmojiPickerFunction to open the EmojiPicker
component.
Type |
---|
React.MouseEventHandler<HTMLSpanElement> |
#
openMentionsListFunction to manually open the list of potential users to mention.
Type |
---|
() => void |
#
overrideSubmitHandlerFunction to override the default submit handler.
Type |
---|
(message: object, channelCid: string) => void |
#
parentWhen replying in a thread, the parent message object.
Type |
---|
object |
#
publishTypingEventIf true, triggers typing events on text input keystroke.
Type | Default |
---|---|
boolean | true |
#
removeFileFunction to remove a file from the fileUploads
mapping.
Type |
---|
(id: string) => void |
#
removeImageFunction to remove an image from the imageUploads
mapping.
Type |
---|
(id: string) => void |
#
setCooldownRemainingReact state hook function that sets the cooldownRemaining
value.
Type |
---|
React.Dispatch<React.SetStateAction<number>> |
#
setTextFunction that overrides and sets the text value of the underlying textarea
component.
Type |
---|
(text: string) => void |
#
showCommandsListIf true, show the list of supported slash commands above the text input.
Type | Default |
---|---|
boolean | false |
#
showMentionsListIf true, show the list of potential users to mention above the text input.
Type | Default |
---|---|
boolean | false |
#
textThe current input value of the underlying textarea
component.
Type |
---|
string |
#
textareaRefReact mutable ref placed on the underlying textarea
component.
Type |
---|
React.MutableRefObject<HTMLTextAreaElement> |
#
uploadFileFunction to upload a file to the fileUploads
mapping.
Type |
---|
(id: string) => void |
#
uploadNewFilesFunction to upload an array of files to the fileUploads
and imageUploads
mappings.
Type |
---|
(files: FileList | File[]) => void |
#
useMentionsTransliterationIf true, will use an optional dependency to support transliteration in the input for mentions. See: https://github.com/sindresorhus/transliterate
Type | Default |
---|---|
boolean | false |