MessageComposer Hooks

Public MessageComposer hooks let you build custom composer UI on top of the same MessageComposer used by the default components.

Best Practices

Read advanced composer state from hooks instead of duplicating it in app state.
Keep sendability checks in one place so buttons, shortcuts, and custom actions stay consistent.
Treat cooldown as channel state and read it through the dedicated hook.
Use useMessageComposerController() only when you need direct access to composer managers or low-level state.
Prefer exported hooks over reaching into internal state managers directly.

Hooks

Hook	Description	Returns
`useAttachmentManagerState`	Returns derived attachment-upload state for the current composer.	`attachments`, `availableUploadSlots`, `blockedUploadsCount`, `failedUploadsCount`, `isUploadEnabled`, `pendingUploadsCount`, `successfulUploadsCount`, `uploadsInProgressCount`
`useAttachmentsForPreview`	Returns the entities rendered by the preview stack.	`attachments`, `location`, `poll`
`useCanCreatePoll`	Returns whether a poll can currently be created for the active composer.	`boolean`
`useCooldownRemaining`	Returns the remaining slow-mode cooldown for the active channel.	`number`
`useMessageComposerController`	Returns the current `MessageComposer` instance. Use it when you need direct access to composer managers such as attachments, link previews, polls, drafts, or quoted-message state.	`MessageComposer`
`useMessageComposerHasSendableData`	Returns whether the current composition can be submitted.	`boolean`
`useMessageContentIsEmpty`	Returns whether the current composition is empty.	`boolean`
`useMessageComposerBindings`	Accepts `MessageComposerProps` and returns the low-level bindings that back `MessageComposerContext`. This hook is mainly useful when building custom composer providers or very low-level input UI.	`handleSubmit`, `onPaste`, `recordingController`, `textareaRef`

Examples

Composer Status

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

const ComposerStatus = () => {
  const { pendingUploadsCount } = useAttachmentManagerState();
  const canSend = useMessageComposerHasSendableData();
  const cooldownRemaining = useCooldownRemaining();

  return (
    <div>
      <div>Pending uploads: {pendingUploadsCount}</div>
      <div>Can send: {String(canSend)}</div>
      <div>Cooldown: {cooldownRemaining}</div>
    </div>
  );
};