MessageComposerContext

MessageComposerContext 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 useMessageComposerContext().

Best Practices

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

Basic Usage

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

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

  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`
`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.RefObject<HTMLTextAreaElement \| null \| undefined>`

Examples

Read cooldown state with the dedicated hook

Cooldown state is no longer part of MessageComposerContext. 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 />;
};