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
to its children. All of
the input UI components consume the MessageInputContext
and rely on the stored data for their display and interaction.
#
Basic UsageAs 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
will be used by default.
<Chat client={client}>
<ChannelList />
<Channel>
<MessageList />
<MessageInput />
</Channel>
</Chat>
#
UI CustomizationThe MessageInput
component does not inject any UI, so all input customization is handled by the Input UI
component. The Input UI component is passed as the Input
prop into either the Channel
or MessageInput
component.
#
Props#
additionalTextareaPropsAdditional props to be passed to the underlying AutoCompleteTextarea
component, available props.
Type |
---|
object |
#
clearEditingStateFunction to clear the editing state while editing a message.
Type |
---|
() => void |
#
closeEmojiPickerOnClickIf true, picking an emoji from the EmojiPicker
component will close the picker.
Type | Default |
---|---|
boolean | false |
#
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> |
#
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 |
#
focusIf true, focuses the text input on component mount.
Type | Default |
---|---|
boolean | false |
#
getDefaultValueGenerates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue
.
Type |
---|
() => string | string[]) |
#
growIf true, expands the text input vertically for new lines.
Type | Default |
---|---|
boolean | true |
#
InputCustom UI component handling how the message input is rendered.
Type | Default |
---|---|
component | MessageInputFlat |
#
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 |
#
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 |
#
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 |
#
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 |
note
9.0.0
#
Migration from versions older than Property keycodeSubmitKeys has been replaced by shouldSubmit and thus is no longer supported. If you had custom key codes specified like so:
keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0
then that would newly translate to:
const shouldSubmit = (event) =>
(event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';
...
shouldSubmit={shouldSubmit}
#
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 |