# 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`](/chat/docs/sdk/react/v14/components/message-composer/message-composer-hooks/) or [`CooldownTimer`](/chat/docs/sdk/react/v14/components/message-composer/ui-components/), not from context.
- Use `useMessageComposerController()` 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 `MessageComposer` so the context remains available.

## Basic Usage

```tsx
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`                                                                                                     |
| `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 `MessageComposerContext`. Read it through the dedicated hook or component instead:

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

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

  if (!cooldownRemaining) return null;

  return <CooldownTimer />;
};
```


---

This page was last updated at 2026-04-13T07:26:58.072Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v14/components/message-composer/message-composer-context/](https://getstream.io/chat/docs/sdk/react/v14/components/message-composer/message-composer-context/).