React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTThis is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13)
.
UI Components
As described in the Input UI component, the default MessageInputFlat is composed from smaller exported building blocks.
Best Practices
- Prefer composing these exported pieces instead of re-implementing composer state.
- Keep
TextareaComposercentral so autocomplete, commands, and shortcuts continue to work. - Treat
VoiceRecordingPreviewSlotas separate fromAttachmentPreviewList. - Use
LinkPreviewListfor scraped content previews; scraped links are not rendered inAttachmentPreviewList. - Decide whether your custom layout should match the default command-selected state, where the attachment selector and extra actions collapse while
CommandChipis visible. - Reuse the default preview stack order unless your product intentionally changes that experience.
Available Building Blocks
Text composition and actions
Preview stack
EditedMessagePreviewQuotedMessagePreviewVoiceRecordingPreviewSlotAttachmentPreviewListLinkPreviewList
Attachment and recorder UI
Command-State Behavior
In the default MessageInputFlat, command state is surfaced through CommandChip.
When a slash command is selected:
- the composer applies
str-chat__message-composer--command-active AttachmentSelectoris hidden by layoutAdditionalMessageComposerActionscollapses out of viewMessageComposerActionsno longer shows the audio-recording button
Custom composers can keep or change that behavior, but those are the current defaults to match if you want visual parity with MessageInputFlat.
TextareaComposer Props
| Prop | Description | Type |
|---|---|---|
additionalTextareaProps | Props forwarded to the underlying textarea. | Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" | "style" | "disabled" | "value"> |
closeSuggestionsOnClickOutside | Closes the suggestion list when the user clicks outside the composer. | boolean |
containerClassName | Class name for the outer div that wraps the textarea. | string |
listClassName | Class name for the suggestion-list container. | string |
maxRows | Maximum number of rows the textarea can grow to. Defaults to 10. | number |
minRows | Minimum number of rows the textarea can shrink to. | number |
shouldSubmit | Custom keyboard-submit logic. | (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean |
LinkPreviewList Props
| Prop | Description | Type |
|---|---|---|
displayLinkCount | Number of loaded previews rendered by the default list. Defaults to 1. | number |
AttachmentPreviewList Slots
AttachmentPreviewList renders uploaded attachments and shared location previews. It does not render:
- scraped links, which are handled by
LinkPreviewList - voice recordings, which are handled by
VoiceRecordingPreviewSlot
The list can be customized with these component props:
| Prop | Purpose |
|---|---|
AudioAttachmentPreview | preview for uploaded audio files |
FileAttachmentPreview | preview for generic file uploads |
GeolocationPreview | preview for shared location data |
ImageAttachmentPreview | preview for uploaded images |
UnsupportedAttachmentPreview | preview for custom local attachment types |
VideoAttachmentPreview | preview for uploaded videos |
VoiceRecordingPreviewSlot Props
| Prop | Description | Type |
|---|---|---|
VoiceRecordingPreview | Custom component used for the dedicated voice-recording preview area above the main attachment list. | ComponentType<VoiceRecordingPreviewProps> |
On this page: