Skip to main content
Version: v3

MessageInput

MessageInput component provides all the UI and necessary functionality (e.g, attachment picker, commands, mentions autocomplete etc.) for composing a message. This component must be used as child of Channel component.

Basic Usage​

<OverlayProvider>
  <Chat client={client}>
    <Channel channel={channel}>
      <MessageInput />
    </Channel>
  </Chat>
</OverlayProvider>

Props​

note

All the configuration for MessageInput can be done on Channel component. Additionally please take a look at our Guide Section on how to customize MessageInput UI

overrides the value from MessageInputContext
clearEditingState​

Function to clear "Editing Message" state from MessageInput component.

Type
function

overrides the value from MessageInputContext
clearQuotedMessageState​

Function to clear "Add Quoted Reply" state from MessageInput component.

Type
function

overrides the value from MessageInputContext
closeAttachmentPicker​

Dismiss the attachment picker, if its already open.

Type
function

overrides the value from SuggestionsContext
componentType​

Current active component type, which is basically a first parameter to openSuggestions.

Type
string | Element

overrides the value from ChannelContext
disabled​

True if channel is frozen and disableIfFrozenChannel is true.

Type
boolean

overrides the value from MessageInputContext
editing​

True if the user is editing some message within MessageInput component.

Type
boolean

overrides the value from MessageInputContext
fileUploads​

List of file type attachments currently attached to message, which is being composed in MessageInput component.

[
  {
    file: {
      name: 'test.pdf';
      size: 2000;
      type: 'application/pdf';
      uri: 'file-uri';
    };
    id: 'asdas232bk3jb42k3';
    state: 'uploaded'; // or 'finished'
    url: 'https://cdn.getstream.io/kajsnkj2n3j4';
  }
]
Type
array

overrides the value from MessageInputContext
giphyActive​

True if a user selects the giphy command from commands list (which is shown when you type a / in the input box). This value is set back to false when the user sends the message for searching Giphy.

Type
boolean

overrides the value from MessageInputContext
imageUploads​

List of image type attachments currently attached to message, which is being composed in MessageInput component.

[
  {
    file: { name: 'fallback-name.jpeg' },
    id: '2j3n4k23nj4k23n4k3',
    state: 'finished', // or 'uploading'
    url: 'https://cdn.getstream.io/kajsnkj2n3j4', // If the state is `uploading`, then this will be a local uri of image.
  },
];
Type
array

overrides the value from MessageInputContext
inputBoxRef​

Ref for TextInput component within MessageInput

Type
ref

overrides the value from MessageInputContext
isValidMessage​

False if text within input box is empty and no images or files have been attached to a message yet. You can use this value to add enabled/disabled UI state on SendMessage button.

Type
boolean

overrides the value from ChannelContext
members​

Members of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

caution

client.queryChannels() or channel.watch() returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use client.queryMembers() API endpoint separately to get the list of members.

Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;
Type
object

overrides the value from ChannelContext
quotedRepliesEnabled​

Allow messages to be replied to using inline quotation.

TypeDefault
booleantrue

overrides the value from SuggestionsContext
suggestions​

Current active list of suggestions, within suggestions list for autocomplete feature.

Type
{ data: array<object>, onSelect: function }

overrides the value from SuggestionsContext
suggestionsTitle​

Title component of current active suggestions autocomplete list.

Type
string | Element

overrides the value from MessageInputContext
additionalTextInputProps​

Additional props provided to the underlying TextInput within MessageInput.

Type
object

overrides the value from MessageInputContext
asyncIds​

overrides the value from MessageInputContext
asyncUploads​

-->

overrides the value from MessageInputContext
maxNumberOfFiles​

Maximum number of files (documents & images), that can be attached per message.

TypeDefault
number10

overrides the value from MessageInputContext
mentionedUsers​

Ids of users which are mentioned (for example Hey @Vishal Narkhede, how are you) in a message, which is being composed in MessageInput component.

['vishal-user-id', 'jaap-user-id'];
Type
array

overrides the value from MessageInputContext
numberOfUploads​

Number of image + files attached to message which is being composed in MessageInput component.

Type
number

overrides the value from MessageInputContext
quotedMessage​

overrides the value from MessageInputContext
removeImage​

Removes attached image in message, which is being composed in MessageInput component. By default, this function is attached to onPress handler for close button in ImageUploadPreview. It takes index of file (to be removed) in imageUploads array as parameter.

Type
(index) => void

overrides the value from MessageInputContext
resetInput​

Resets the entire MessageInput component to empty state by clearing the text, attachments etc.

Type
function

overrides the value from MessageInputContext
sending​

-->

overrides the value from MessageInputContext
sendMessageAsync​

overrides the value from MessageInputContext
setGiphyActive​

Setter function for giphyActive

Type
(isActive) => void

overrides the value from MessageInputContext
showMoreOptions​

Represents the expanded or collapsed state for attach and commands button, next to input box.

Type
boolean

overrides the value from ThreadContext
thread​

A message object that when set indicates a thread is open. When used with the Thread component this will display the thread. When used with the standard MessageList component this will prevent any singleton components in the OverlayProvider form getting out of sync.

note

thread should be set on all Channel components when a thread is open.

Type
object

overrides the value from MessageInputContext
uploadNewImage​

Function to upload an attached image in MessageInput. This function takes an image from imageUploads array as a parameter.

Type
(image) => Promise

overrides the value from ChannelContext
watchers​

Watchers of current channel. This value is received from backend when you query a channel, either using client.queryChannels() or channel.watch() API call.

caution

client.queryChannels() or channel.watch() returns only up to 100 watchers for channel. So if you expect total number of watchers to be > 100, you should request them explicitly using Channel Pagination

Record<
  string, // string
  UserResponse<UserType>
>;
Type
object

overrides the value from ChannelContext
Reply​

Component to render preview of parent of message for quoted reply.

TypeDefault
componentReply

overrides the value from MessageInputContext
FileUploadPreview​

Component to render preview of attached file, within enclosed MessageInput component.

TypeDefault
componentFileUploadPreview

overrides the value from MessageInputContext
ImageUploadPreview​

Component to render preview of attached images, within enclosed MessageInput component

TypeDefault
componentImageUploadPreview

overrides the value from MessageInputContext
Input​

Component to render UI part of enclosed MessageInput component. Please read section in guides about Customizing Message Input.

Type
component

overrides the value from MessageInputContext
InputButtons​

Component to render action buttons (CommandsButton and AttachButton) on left side of input box, within enclosed MessageInput component.

TypeDefault
componentInputButtons

overrides the value from MessageInputContext
SendButton​

Component to render a send message button, within enclosed MessageInput component.

TypeDefault
componentSendButton

overrides the value from MessageInputContext
ShowThreadMessageInChannelButton​

Component to render a checkbox within enclosed Thread component, which when checked sets a show_in_channel property to true on a message.

TypeDefault
componentShowThreadMessageInChannelButton

Did you find this page helpful?