UI Components

As described in the Input UI section, our default MessageInputFlat component is a combination of various UI subcomponents. We export all the building blocks of MessageInputFlat, so a custom Input UI component can be built in a similar way. Check out the Input UI Customization section for an example.

The following UI components are available for use:

ChatAutoComplete - wrapper component that provides data and functionality to the underlying textarea component imported from react-textarea-autosize
DefaultTriggerProvider - provides the default autocomplete triggers (i.e., /, @, and :) to the MessageInput children
EmojiPicker - picker component for selecting an emoji
LinkPreviewList - component rendering scraped link data in a preview cards
QuotedMessagePreview - displays a UI wrapper around the MessageInput when an existing message is being quoted
SendButton - on click, sends a message to the currently active channel
UploadsPreview - displays a list of uploaded files prior to sending the message

ChatAutoComplete Props

handleSubmit

Function to override the default submit handler on the underlying textarea component.

Type	Default
(event: React.BaseSyntheticEvent) => void	MessageInputContextValue['handleSubmit']

onBlur

Function to run on blur of the underlying textarea component.

Type
`React.FocusEventHandler<HTMLTextAreaElement>`

onChange

Function to override the default onChange behavior on the underlying textarea component.

Type	Default
`React.ChangeEventHandler<HTMLTextAreaElement>`	MessageInputContextValue['onChange']

onFocus

Function to run on focus of the underlying textarea component.

Type
`React.FocusEventHandler<HTMLTextAreaElement>`

onPaste

Function to override the default onPaste behavior on the underlying textarea component.

Type	Default
`(event: React.ClipboardEvent<HTMLTextAreaElement>) => void`	MessageInputContextValue['onPaste']

placeholder

Placeholder for the underlying textarea component.

Type	Default
string	'Type your message'

rows

The initial number of rows for the underlying textarea component.

Type	Default
number	1

value

The text value of the underlying textarea component.

Type	Default
string	MessageInputContextValue['text']

wordReplace

Function to override the default emojiReplace behavior on the wordReplace prop of the textarea component.

Type
(word: string, emojiIndex?: NimbleEmojiIndex) => string

DefaultTriggerProvider

Note:

The DefaultTriggerProvider component does not take any props and by default sets the autocompleteTriggers in MessageInputContext as / (commands), @ (mentions), and : (emojis).

DefaultTriggerProvider wraps the Input UI component and doesn't need to be explicitly added to your app unless you wish to change trigger settings. To change trigger settings, provide a custom trigger provider component to the Channel component via the TriggerProvider prop. An example can be found in the Message Input UI customization section.

EmojiPicker Props

small

If true, updates the CSS class name of the div container and renders a smaller version of the picker.

Type	Default
boolean	false

LinkPreviewList Props

linkPreviews

An array of LinkPreview objects - a union type of LinkPreviewState and OGAttachment. The array is derived from linkPreviews Map of MessageInputContextValue.

Type
LinkPreview[]

QuotedMessagePreview Props

quotedMessage

The existing message to be quoted by the next sent message.

Type
object

SendButton Props

sendMessage

Function to send a message to the currently active channel.

Type
(event: React.BaseSyntheticEvent) => void

UploadsPreview

Note:

UploadsPreview only consumes context and does not accept any optional props.