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

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

TypeDefault
booleanfalse

disableMentions

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

TypeDefault
booleanfalse

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

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

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.

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

hideSendButton

Allows to hide MessageInput’s send button. Used by MessageSimple to hide the send button in EditMessageForm. Received from MessageInputProps.

TypeDefault
booleanfalse

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.

TypeDefault
booleantrue

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.

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

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.

TypeDefault
number1

noFiles

If true, disables file uploads for all attachments except for those with type ‘image’.

TypeDefault
booleanfalse

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.

TypeDefault
booleantrue

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.

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>

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

TypeDefault
booleanfalse
© Getstream.io, Inc. All Rights Reserved.