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 underlyingtextarea
component imported from react-textarea-autosizeDefaultTriggerProvider
- provides the default autocomplete triggers (i.e.,/
,@
, and:
) to theMessageInput
childrenEmojiPicker
- picker component for selecting an emojiQuotedMessagePreview
- displays a UI wrapper around theMessageInput
when an existing message is being quotedSendButton
- on click, sends a message to the currently active channelUploadsPreview
- displays a list of uploaded files prior to sending the message
#
ChatAutoComplete Props#
handleSubmitFunction to override the default submit handler on the underlying textarea
component.
Type | Default |
---|---|
(event: React.BaseSyntheticEvent) => void | MessageInputContextValue['handleSubmit'] |
#
onBlurFunction to run on blur of the underlying textarea
component.
Type |
---|
React.FocusEventHandler<HTMLTextAreaElement> |
#
onChangeFunction to override the default onChange behavior on the underlying textarea
component.
Type | Default |
---|---|
React.ChangeEventHandler<HTMLTextAreaElement> | MessageInputContextValue['onChange'] |
#
onFocusFunction to run on focus of the underlying textarea
component.
Type |
---|
React.FocusEventHandler<HTMLTextAreaElement> |
#
onPasteFunction to override the default onPaste behavior on the underlying textarea
component.
Type | Default |
---|---|
(event: React.ClipboardEvent<HTMLTextAreaElement>) => void | MessageInputContextValue['onPaste'] |
#
placeholderPlaceholder for the the underlying textarea
component.
Type | Default |
---|---|
string | 'Type your message' |
#
rowsThe initial number of rows for the underlying textarea
component.
Type | Default |
---|---|
number | 1 |
#
valueThe text value of the underlying textarea
component.
Type | Default |
---|---|
string | MessageInputContextValue['text'] |
#
DefaultTriggerProvidernote
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#
smallIf true, updates the CSS class name of the div
container and renders a smaller version of the picker.
Type | Default |
---|---|
boolean | false |
#
QuotedMessagePreview PropsRequired message#
The existing message to be quoted by the next sent message.
Type |
---|
object |
#
SendButton PropsRequired sendMessage#
Function to send a message to the currently active channel.
Type |
---|
(event: React.BaseSyntheticEvent) => void |
#
UploadsPreviewnote
UploadsPreview
only consumes context and does not accept any optional props.