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

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 thread-specific Input and Message props 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,
  MessageInput,
  MessageList,
  Thread,
  Window,
} from "stream-chat-react";

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

UI Customization

Thread supports two customization layers:

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

Different UI for the main channel and the thread

import {
  Channel,
  ChannelHeader,
  MessageInput,
  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 MainInput = () => <div>Main composer</div>;
const ThreadInput = () => <div>Thread composer</div>;

const App = () => (
  <WithComponents overrides={{ Message: MainMessage }}>
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput Input={MainInput} />
      </Window>
      <Thread Input={ThreadInput} Message={ThreadMessage} />
    </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
`additionalMessageInputProps`	Extra props passed to the underlying `MessageInput`.	`MessageInputProps`
`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`
`Input`	Thread-specific input UI.	`React.ComponentType`
`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`

ThreadListItem

ThreadContext