Components

MessageInput

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

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

Component children

The following table contains a 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