MessageInputContext

MessageInputContext is created by MessageInput. It combines MessageInputProps, MessageInputState (from useMessageInputState), and cooldownTimerState (from useCooldownTimer). Use it to build custom Input UI components via useMessageInputContext.

Best Practices

• Use context values in custom input components instead of duplicating state.
• Respect cooldownRemaining and disabled to prevent invalid submits.
• Avoid relying on deprecated isThreadInput; use composer state instead.
• Keep submit handlers focused and delegate heavy work to middleware.
• Close lists (closeCommandsList, closeMentionsList) on custom UI state changes.

Basic Usage

Pull values from MessageInputContext with our custom hook:

const { autocompleteTriggers, handleSubmit } = useMessageInputContext();

Values

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.

closeCommandsList

Function to manually close the list of supported slash commands.

closeMentionsList

Function to manually close the list of potential users to mention.

cooldownInterval

If slow mode is enabled, the required wait time between messages for each user.

cooldownRemaining

If slow mode is enabled, the amount of time remaining before the connected user can send another message.

disabled

If true, disables the text input.

dismissLinkPreview

Function called when a single link preview is dismissed.

emojiSearchIndex

Custom class constructor to override default NimbleEmojiIndex from emoji-mart.

focus

If true, focuses the text input on component mount.

handleSubmit

Function that runs onSubmit to the underlying textarea component.

hideSendButton

Allows to hide MessageInput's send button. Used by MessageSimple to hide the send button in EditMessageForm. Received from MessageInputProps.

isThreadInput

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

shouldSubmit

By default, Enter submits and Shift+Enter inserts a new line. Provide this function to override that behavior.

maxRows

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

minRows

Min number of rows the underlying textarea will start with.

onPaste

Function that runs onPaste to the underlying textarea component.

overrideSubmitHandler

Function to override the default submit handler.

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.

setCooldownRemaining

React state hook function that sets the cooldownRemaining value.

textareaRef

React mutable ref placed on the underlying textarea component.