UI Components

As described in the Input UI section, our default MessageInputFlat component is a combination of various UI sub-components. We export all of 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

• 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']

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 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']

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

QuotedMessagePreview Props

Required

message

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

Type
object

SendButton Props

Required

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.