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.

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

Type
() => void

focus

If true, focuses the text input on component mount.

TypeDefault
booleanfalse

hideSendButton

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

TypeDefault
booleanfalse

Input

Custom UI component handling how the message input is rendered.

TypeDefault
componentMessageInputFlat

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.

TypeDefault
number10

minRows

Min number of rows the underlying textarea will start with.

TypeDefault
number1

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