Skip to main content
Version: v12

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

wordReplace

Function to override the default emojiReplace behavior on the wordReplace prop of the textarea component.

Type
(word: string, emojiIndex?: NimbleEmojiIndex) => string

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

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>

Did you find this page helpful?