UI Components

As described in the Input UI component, the default MessageInputFlat component is composed of smaller UI pieces. All of those building blocks are exported so you can build a custom Input UI component. See Input UI Customization for an example.

The following UI components are available for use:

• TextareaComposer - wrapper component that provides data and functionality to the underlying textarea component imported from react-textarea-autosize

• EmojiPicker - picker component for selecting an emoji

• LinkPreviewList - renders scraped link data in 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

• SendToChannelCheckbox - displays a checkbox to send the composed thread reply to the channel's message list as well

Best Practices

• Compose a custom Input UI from these building blocks instead of re-implementing state.
• Keep the TextareaComposer central to ensure autocomplete and commands work.
• Use AttachmentPreviewList for consistent attachment validation and rendering.
• Add SendToChannelCheckbox only when thread-to-channel posting is supported.
• Keep emoji and link preview components optional for lighter UIs.

TextareaComposer Props

additionalTextareaProps

Props forwarded to textarea element. Note that defaultValue, style, value and disabled are omitted.

type additionalTextareaProps = Omit<
  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
  "defaultValue" | "style" | "disabled" | "value"
>;

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.

containerClassName

HTML class applied to the div wrapping the textarea.

listClassName

HTML class applied to the ul element wrapping suggestion items in SuggestionList.

maxRows

Maximum number of rows the textarea can grow to.

minRows

Minimum number of rows the textarea can shrink to.

shouldSubmit

Function result will decide whether the combination of keys pressed should be evaluated as signal for message submission.

EmojiPicker Props

small

If true, updates the CSS class name of the div container and renders a smaller version of the picker.

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.

AttachmentPreviewList

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

• audio
• video
• image
• voiceRecording
• file

A special case of attachment is geolocation. The geolocation data is taken from message.shared_location and not from message.attachments.

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

AudioAttachmentPreview

Custom component to render audio type of attachments. By default, rendered with FileAttachmentPreview.

FileAttachmentPreview

Custom component to be rendered for attachments of type 'file'.

GeolocationPreview

Custom component to render the shared location data.

ImageAttachmentPreview

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

UnsupportedAttachmentPreview

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

VideoAttachmentPreview

Custom component to render video type of attachments. By default, rendered with FileAttachmentPreview.

VoiceRecordingPreview

Custom component to preview audio recorded using AudioRecorder component.