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.

<Chat client={client}>
  <ChannelList />
  <Channel>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>

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.

focus

If true, focuses the text input on component mount.

hideSendButton

Allows to hide MessageInput’s send button. Used by MessageSimple to hide the send button in EditMessageForm.

Input

Custom UI component handling how the message input is rendered.

isThreadInput

Signals that the MessageInput is rendered in a message thread (Thread component). The property is now deprecated. Use messageComposer.threadId to determine whether a thread reply is being composed.

maxRows

Max number of rows the underlying textarea component is allowed to grow.

minRows

Min number of rows the underlying textarea will start with.

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.

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.

keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0

const shouldSubmit = (event) =>
  (event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';

...

shouldSubmit={shouldSubmit}