Components

MessageInput

<MessageInput {...MessageInput.MessageInputProps} />

This is a container for MessageInputArea and SendButton. Can be themed with theme.Chat.MessageInput

Component children

These below are list of children
Key Condition Type Align Description
line styled(div) Line that separates the top of the text area container from other components
textarea styled(div) Wrapper for the input area (`MessageInputArea` component) and the send button

Constructor

# <MessageInput />

Parameters:
Name Type Description
props MessageInput.MessageInputProps Properties to be passed to configure this component.

Members

DynamicContentStore.<MessageInput.MessageInputChildrenProps>

# static readonly Content

Dynamic content store
MessageInput.MessageInputProps

# static readonly defaultProps

Default properties

Type Definitions

"Bubble" | "Line" | "Boxed"

# InputAreaStyle

Styles of the message input's input area.

# InputAreaStyleProps

Style properties for input element
Properties:
Name Type Description
areaStyle MessageInput.InputAreaStyle Styles of the message input's input element.
MessageInput.MessageInputProps

# MessageInputChildrenProps

Properties of Message Input.
Properties:
Name Type Attributes Description
channelSid string Unique identifier of the Channel.
channel ChannelState.ChannelState <optional>
 Represents a remote channel of communication.
connectionState string <optional>
 Represents status of the Channel

# MessageInputProps

Properties of Message Input.
Properties:
Name Type Attributes Default Description
theme.MessageInput Theme.MessageInputThemeProps <optional>
 theme
areaStyle MessageInput.InputAreaStyle <optional>
 Bubble Visual style of the text input element.
disabledReason string <optional>
 A reason on why MessageInput is disabled.
returnKeySendsMessage boolean <optional>
 true Whether pressing the return key should send a message.
charLimit number Identifies character limit for a single message.
children DynamicComponentChildren.<MessageInput.MessageInputChildrenProps> <optional>
 children
useLocalState boolean Deprecated - If set to true, it keeps the message value in the local component state, instead of the Redux state.
sendButtonAriaProps AriaProps <optional>
 SendButton aria props
textAreaAriaProps AriaProps <optional>
 TextArea aria props