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 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.

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.

TypeDefault
number1

minRows

Maximum number of rows the teaxtarea allowed to shrink.

TypeDefault
number1

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.

TypeDefault
booleanfalse

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>
© Getstream.io, Inc. All Rights Reserved.