<Chat client={client}>
<ChannelList />
<Channel>
<MessageList />
<MessageInput />
</Channel>
</Chat>
MessageInput
The MessageInput
component is a React Context provider that wraps all the logic, functionality, and UI for the message input
displayed in a channel. It provides the MessageInputContext
to its children. All of
the input UI components consume the MessageInputContext
and rely on the stored data for their display and interaction.
Basic Usage
As a context consumer, the MessageInput
component must be rendered as a child of the Channel
component. MessageInput
has
no required props and calls custom hooks to assemble the context values loaded into the MessageInputContext
and provided
to its children.
If a custom input is not provided via the Input
prop, MessageInputFlat
will be used by default.
UI Customization
The MessageInput
component does not inject any UI, so all input customization is handled by the Input UI
component. The Input UI component is passed as the Input
prop into either the Channel
or MessageInput
component.
Props
additionalTextareaProps
Additional props to be consumed by the underlying TextareaComposer
component.
type additionalTextareaProps = Omit<
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
"defaultValue" | "style" | "disabled" | "value"
>;
clearEditingState
Function to clear the editing state while editing a message.
Type |
---|
() => void |
focus
If true, focuses the text input on component mount.
Type | Default |
---|---|
boolean | false |
hideSendButton
Allows to hide MessageInput’s send button. Used by MessageSimple
to hide the send button in EditMessageForm
.
Type | Default |
---|---|
boolean | false |
Input
Custom UI component handling how the message input is rendered.
Type | Default |
---|---|
component | MessageInputFlat |
isThreadInput
Signals that the MessageInput is rendered in a message thread (Thread component).
Type |
---|
boolean |
maxRows
Max number of rows the underlying textarea
component is allowed to grow.
Type | Default |
---|---|
number | 10 |
minRows
Min number of rows the underlying textarea
will start with.
Type | Default |
---|---|
number | 1 |
overrideSubmitHandler
Function to override the default submit handler. This function is not intended for message composition purposes. In those cases, define custom composition middleware for message and draft composition (guide here)[/chat/docs/sdk/react/components/message-input-components/message-composer-middleware#message-composer-middleware-overview].
type overrideSubmitHandler = (params: {
cid: string; // target channel CID
localMessage: LocalMessage; // object representing the local message data used for UI update
message: Message; // object representing the payload sent to the server for message creation / update
sendOptions: SendMessageOptions;
}) => Promise<void> | void;
import { MessageInput } from "stream-chat-react";
import type { MessageInputProps } from "stream-chat-react";
const CustomMessageInput = (props: MessageInputProps) => {
const submitHandler: MessageInputProps["overrideSubmitHandler"] = useCallback(
async (params: {
cid: string;
localMessage: LocalMessage;
message: Message;
sendOptions: SendMessageOptions;
}) => {
// custom logic goes here
await sendMessage({ localMessage, message, options: sendOptions });
},
[sendMessage],
);
return (
<StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />
);
};
parent
When replying in a thread, the parent message object.
Type |
---|
object |
shouldSubmit
Currently, Enter
is the default submission key and Shift
+Enter
is the default combination for the new line.
If specified, this function overrides the default behavior specified previously.
Type |
---|
(event: KeyboardEvent) => boolean |
Migration from versions older than 9.0.0
Property keycodeSubmitKeys has been replaced by shouldSubmit and thus is no longer supported. If you had custom key codes specified like so:
keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0
then that would newly translate to:
const shouldSubmit = (event) =>
(event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';
...
shouldSubmit={shouldSubmit}