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
AttachmentPreviewList - displays a list of message attachments

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

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

AttachmentPreviewList

Renders message attachments in preview. The default (supported) message attachment types are:

audio
video
image
voiceRecording
file

If the attachment object has property og_scrape_url or title_link, then it is rendered be LinkPreviewList component and not AttachmentPreviewList.

FileAttachmentPreview

Custom component to be rendered for attachments of types 'file', 'video', 'audio'.

Type
`ComponentType<FileAttachmentPreviewProps>`

ImageAttachmentPreview

Custom component to be rendered for uploaded 'image' attachment.

Type
`ComponentType<ImageAttachmentPreviewProps>`

UnsupportedAttachmentPreview

Custom component to be rendered for attachment that is not recognized as any of the default types.

Type
`ComponentType<UnsupportedAttachmentPreviewProps>`

VoiceRecordingPreview

Custom component to preview audio recorded using AudioRecorder component.

Type
`ComponentType<VoiceRecordingPreviewProps>`

Input UI

Emoji Picker