const { autocompleteTriggers, handleSubmit } = useMessageInputContext();
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:
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. Every attachment object carries attribute localMetadata
that is internally used to manage the attachment state in the composer (update, remove attachments from the state, keep reference to uploaded files, keep information about the file upload state). The localMetadata
object is discarded from each attachment object before sending the resulting message to the server. The attachments array does not contain attachments created by URL enrichment. These scraped attachments are kept in linkPreviews
map.
Type |
---|
LocalAttachment[] |
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 |
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’.
Type | Default |
---|---|
constructor | ComponentContext[‘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 |
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 |
insertText
Function to insert text into the value of the underlying textarea
component.
Type |
---|
(textToInsert: string) => void |
isThreadInput
Signals that the MessageInput is rendered in a message thread (Thread component).
Type |
---|
boolean |
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 successful 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 |
minRows
Min number of rows the underlying textarea
will start with. The grow
on MessageInput prop has to be enabled for minRows
to take effect.
Type | Default |
---|---|
number | 1 |
noFiles
If true, disables file uploads for all attachments except for those with type ‘image’.
Type | Default |
---|---|
boolean | false |
numberOfUploads
The number of successfully uploaded files for 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 |
removeAttachments
Function to remove an attachment objects from the attachments
array in the MessageInputState
.
Type |
---|
(id: string[]) => void |
const Component = () => {
const { attachments, removeAttachments } = useMessageInputContext();
return (
<div>
{attachments.map((att) => (
<button onClick={() => removeAttachments([att.localMetadata.id])}>
Remove
</button>
))}
</div>
);
};
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> |
uploadAttachment
Uploads the file that comes as a part of the attachment
object argument. The function expects the attachment
object to contain attribute localMetadata
, which in turn should contain file
attribute referring to the file to be uploaded and an attribute id
with attachment’s unique identifier string. The localMetadata
object is discarded when the message is posted.
So the minimum required attachment
object for upload would be:
type MinimumUploadAttachment = {
localMetadata: {
file: File | Blob;
id: string;
};
};
The function returns undefined
if, custom upload function (doImageUploadRequest
, doFileUploadRequest
) fails.
Type |
---|
(attachment: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> | undefined> |
uploadNewFiles
Function to upload an array of files and store the results as LocalAttachment
objects in attachments
array of the MessageInputContext
.
Type |
---|
(files: FileList | File[]) => void |
upsertAttachments
Function that adds or updates attachments
array in MessageInputState
. Accepts an array of objects.
Type |
---|
(attachments: (Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>)[]) => void |
const Component = () => {
const { upsertAttachments } = useMessageInputContext();
const handleSelect = (location) => {
upsertAttachments([
{
type: "geolocation",
longitude: location.longitude,
latitude: location.latitude,
name: location.name,
},
]);
};
// ...
};
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 |
- Basic Usage
- Values
- additionalTextareaProps
- attachments
- autocompleteTriggers
- cancelURLEnrichment
- clearEditingState
- closeCommandsList
- closeMentionsList
- cooldownInterval
- cooldownRemaining
- disabled
- disableMentions
- dismissLinkPreview
- doFileUploadRequest
- doImageUploadRequest
- emojiIndex
- emojiPickerIsOpen
- emojiPickerRef
- errorHandler
- findAndEnqueueURLsToEnrich
- focus
- grow
- handleChange
- handleEmojiKeyDown
- handleSubmit
- hideSendButton
- insertText
- isThreadInput
- isUploadEnabled
- linkPreviews
- shouldSubmit
- maxFilesLeft
- maxRows
- mentionAllAppUsers
- mentioned_users
- mentionQueryParams
- message
- minRows
- noFiles
- numberOfUploads
- onPaste
- onSelectEmoji
- onSelectUser
- openCommandsList
- openEmojiPicker
- openMentionsList
- overrideSubmitHandler
- parent
- publishTypingEvent
- removeAttachments
- setCooldownRemaining
- setText
- showCommandsList
- showMentionsList
- text
- textareaRef
- uploadAttachment
- uploadNewFiles
- upsertAttachments
- useMentionsTransliteration