Skip to main content

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 Props#

handleSubmit#

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

TypeDefault
(event: React.BaseSyntheticEvent) => voidMessageInputContextValue['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.

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

TypeDefault
(event: React.ClipboardEvent<HTMLTextAreaElement>) => voidMessageInputContextValue['onPaste']

placeholder#

Placeholder for the the underlying textarea component.

TypeDefault
string'Type your message'

rows#

The initial number of rows for the underlying textarea component.

TypeDefault
number1

value#

The text value of the underlying textarea component.

TypeDefault
stringMessageInputContextValue['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.

TypeDefault
booleanfalse

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.

Did you find this page helpful?