type additionalTextareaProps = Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
"defaultValue" | "style" | "disabled" | "value"
>;
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:
TextareaComposer
- wrapper component that provides data and functionality to the underlyingtextarea
component imported from react-textarea-autosizeEmojiPicker
- 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
TextareaComposer Props
additionalTextareaProps
Props forwarded to textarea
element. Note that defaultValue
, style
, value
and disabled
are omitted.
You can configure the default value and disabled state via MessageComposer
configuration. The value is handled by the MessageComposer.textComposer
state. The style should be attached via CSS.
closeSuggestionsOnClickOutside
If enabled, the suggestion list is hidden when clicked outside the MessageInput
.
Type |
---|
boolean |
containerClassName
HTML class applied to the div
wrapping the textarea
.
Type |
---|
string |
listClassName
HTML class applied to the ul
element wrapping suggestion items in SuggestionList
.
Type |
---|
string |
maxRows
Maximum number of rows the teaxtarea
allowed to grow.
Type | Default |
---|---|
number | 1 |
minRows
Maximum number of rows the teaxtarea
allowed to shrink.
Type | Default |
---|---|
number | 1 |
shouldSubmit
Function result will decide whether the combination of keys pressed should be evaluated as signal for message submission.
Type |
---|
(event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean |
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
The component does not have any props.
QuotedMessagePreview Props
renderText
Function to render message text content
type renderText = (
text?: string,
mentioned_users?: UserResponse[],
options?: RenderTextOptions,
) => ReactNode;
SendButton Props
sendMessage
Function to send a message to the currently active channel.
Type |
---|
(event: React.BaseSyntheticEvent, customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>) => 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 by 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> |