This is beta documentation for Stream Chat React SDK v14. For the latest stable version, see the latest version (v13) .

MessageInputContext

MessageInputContext exposes the small set of composer props and controls consumed by input UI components. Use it from custom input layouts, buttons, and recorder UI via useMessageInputContext().

Best Practices

Use MessageInputContext for input controls such as submit, paste handling, and recording state.
Read cooldown state with useCooldownRemaining or CooldownTimer, not from context.
Use useMessageComposer() when you need access to composer managers such as attachments, link previews, poll creation, or quoted-message state.
Treat isThreadInput as legacy. Prefer messageComposer.threadId.
Keep custom input components mounted under MessageInput so the context remains available.

Basic Usage

import {
  SendButton,
  TextareaComposer,
  useMessageInputContext,
} from "stream-chat-react";

const CompactInput = () => {
  const { handleSubmit } = useMessageInputContext();

  return (
    <div className="compact-input">
      <TextareaComposer />
      <SendButton sendMessage={handleSubmit} />
    </div>
  );
};

Values

Value	Description	Type
`additionalTextareaProps`	Additional props forwarded to `TextareaComposer`.	`Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" \| "style" \| "disabled" \| "value">`
`asyncMessagesMultiSendEnabled`	Whether recorded voice messages stay in the preview stack until the user submits the whole composition.	`boolean`
`audioRecordingEnabled`	Whether the current composer instance exposes voice-recording UI.	`boolean`
`emojiSearchIndex`	Emoji search implementation used by the composer.	`ComponentContextValue["emojiSearchIndex"]`
`focus`	Whether the textarea should focus on mount.	`boolean`
`handleSubmit`	Submit handler used by the default send button and textarea shortcut handling.	`(event?: React.BaseSyntheticEvent) => void`
`hideSendButton`	Whether the default send button should be hidden.	`boolean`
`isThreadInput`	Deprecated thread flag kept for compatibility.	`boolean`
`maxRows`	Maximum number of rows used by the default textarea.	`number`
`minRows`	Minimum number of rows used by the default textarea.	`number`
`onPaste`	Paste handler used by the default textarea.	`(event: React.ClipboardEvent<HTMLTextAreaElement>) => void`
`parent`	Parent message when composing a thread reply.	`LocalMessage`
`recordingController`	Recorder state and controls for voice-message recording.	`RecordingController`
`shouldSubmit`	Custom submit-key logic for the textarea.	`(event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean`
`textareaRef`	Ref used by the default textarea.	`React.MutableRefObject<HTMLTextAreaElement \| null \| undefined>`

Examples

Read cooldown state with the dedicated hook

Cooldown state is no longer part of MessageInputContext. Read it through the dedicated hook or component instead:

import { CooldownTimer, useCooldownRemaining } from "stream-chat-react";

const ComposerFooter = () => {
  const cooldownRemaining = useCooldownRemaining();

  if (!cooldownRemaining) return null;

  return <CooldownTimer />;
};

MessageInput

MessageInput Hooks