Thread

Thread renders a parent message together with its replies. It manages its own list and composer and consumes the surrounding Channel contexts.

Best Practices

Wrap the main channel content in Window so the layout stays stable when the thread opens.
Use the Message prop and additionalMessageComposerProps only when the thread UX truly differs from the main channel.
Customize ThreadHeader, ThreadHead, and ThreadStart through WithComponents.
Use virtualized for long-running or high-volume threads.
Keep thread message actions aligned with the main channel unless the product intentionally differs.

Basic Usage

import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
} from "stream-chat-react";

const App = () => (
  <Channel>
    <Window>
      <ChannelHeader />
      <MessageList />
      <MessageComposer />
    </Window>
    <Thread />
  </Channel>
);

UI Customization

Thread supports two customization layers:

local Thread props for the thread message UI and composer behavior
WithComponents overrides for shared thread surfaces such as ThreadHeader, ThreadHead, ThreadStart, and MessageComposerUI

Different UI for the main channel and the thread

import {
  Channel,
  ChannelHeader,
  MessageComposer,
  MessageList,
  Thread,
  Window,
  WithComponents,
  useMessageContext,
} from "stream-chat-react";

const MainMessage = () => {
  const { message } = useMessageContext();
  return <div>{message.text}</div>;
};

const ThreadMessage = () => {
  const { message } = useMessageContext();
  return <div className="thread-message">{message.text}</div>;
};

const MainComposerUI = () => <div>Main composer</div>;
const ThreadComposerUI = () => <div>Thread composer</div>;

const App = () => (
  <WithComponents
    overrides={{
      MessageUI: MainMessage,
      MessageComposerUI: MainComposerUI,
    }}
  >
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageComposer />
      </Window>
      <WithComponents overrides={{ MessageComposerUI: ThreadComposerUI }}>
        <Thread Message={ThreadMessage} />
      </WithComponents>
    </Channel>
  </WithComponents>
);

Custom `ThreadHeader`, `ThreadHead`, and `ThreadStart`

import { Thread, WithComponents } from "stream-chat-react";

const CustomThreadHeader = (props) => <div>Custom thread header</div>;
const CustomThreadHead = (props) => <div>Custom parent message section</div>;
const CustomThreadStart = () => <div>Replies start here</div>;

const ThreadPanel = () => (
  <WithComponents
    overrides={{
      ThreadHead: CustomThreadHead,
      ThreadHeader: CustomThreadHeader,
      ThreadStart: CustomThreadStart,
    }}
  >
    <Thread />
  </WithComponents>
);

Props

Prop	Description	Type
`additionalMessageComposerProps`	Extra props passed to the underlying `MessageComposer`.	`MessageComposerProps`
`additionalMessageListProps`	Extra props passed to the underlying `MessageList`.	`MessageListProps`
`additionalParentMessageProps`	Extra props passed to the parent `Message` rendered at the top of the thread.	`Partial<MessageProps>`
`additionalVirtualizedMessageListProps`	Extra props passed to the underlying `VirtualizedMessageList`.	`VirtualizedMessageListProps`
`autoFocus`	Focuses the thread input when the thread opens.	`boolean`
`enableDateSeparator`	Enables date separators inside the thread list.	`boolean`
`Message`	Thread-specific message UI.	`React.ComponentType<MessageUIComponentProps>`
`messageActions`	Allowed message actions inside the thread.	`MessageActionsArray`
`virtualized`	Uses `VirtualizedMessageList` instead of `MessageList` for replies.	`boolean`

Thread

Best Practices

Basic Usage

UI Customization

Different UI for the main channel and the thread

Custom ThreadHeader, ThreadHead, and ThreadStart

Props

Custom `ThreadHeader`, `ThreadHead`, and `ThreadStart`