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 underlyingtextarea
component imported from react-textarea-autosizeDefaultTriggerProvider
- provides the default autocomplete triggers (i.e.,/
,@
, and:
) to theMessageInput
childrenEmojiPicker
- picker component for selecting an emojiLinkPreviewList
- component rendering scraped link data in a preview cardsQuotedMessagePreview
- displays a UI wrapper around theMessageInput
when an existing message is being quotedSendButton
- on click, sends a message to the currently active channelAttachmentPreviewList
- 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
Required 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
Required quotedMessage
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 |
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> |