Skip to main content


The Thread component renders a list of replies tied to a single parent message in a channel's main message list. A Thread maintains its own state and renders its own MessageList and MessageInput components. Each piece of rendered UI can be overridden with custom components either drawn from the ComponentContext or supplied via props.

The Thread component consumes the contexts established in Channel and does not have any required props.

Basic Usage#

As a context consumer, the Thread component must be rendered as a child of the Channel component. To enable smooth Thread mount and unmount behavior, wrap the main channel components in the Window component. Window handles width changes in the main channel to ensure a seamless user experience when opening and closing a Thread.

<Chat client={client}>  <ChannelList />  <Channel>    <Window>      <MessageList />      <MessageInput />    </Window>    <Thread />  </Channel></Chat>

UI Customization#

Since a Thread contains most of the pieces of a Channel component, just in an encapsulated form, many aspects and components can be customized in a similar way. The UI components for both Message and MessageInput can be overridden via props if you desire different UI from the styles rendered in the main Channel. ThreadHeader and ThreadStart are two overridable UI components unique to Thread that can be drawn from the ComponentContext.

Example 1 - The below example shows how to render different UI for messages and the input within a Thread, versus those rendered in the main Channel.


A common pattern we use in the library is to first check props to see if a value/component exists, and if not, pull from context.

const MainInput = (props) => {  // render main `MessageInput` UI component here};
const MainMessage = (props) => {  // render main `Message` UI component here};
const ThreadInput = (props) => {  // render thread `MessageInput` UI component here};
const ThreadMessage = (props) => {  // render thread `Message` UI component here};
<Chat client={client}>  <ChannelList />  <Channel Input={MainInput} Message={MainMessage}>    <Window>      <MessageList />      <MessageInput />    </Window>    <Thread Input={ThreadInput} Message={ThreadMessage} />  </Channel></Chat>;

Example 2 - The below example shows how to provide custom UI for the ThreadHeader and ThreadStart components. ThreadHeader is rendered above the UI for the thread's parent Message component and at the top of the Thread. ThreadStart serves as a separator between the parent message and the MessageList of replies.

const CustomThreadHeader = (props) => {  // render thread header UI component here};
const CustomThreadStart = (props) => {  // render thread start UI component here};
<Chat client={client}>  <ChannelList />  <Channel ThreadHeader={CustomThreadHeader} ThreadStart={CustomThreadStart}>    <Window>      <MessageList />      <MessageInput />    </Window>    <Thread />  </Channel></Chat>;



Additional props to be passed to the underlying MessageInput component.



Additional props to be passed to the underlying MessageList component.



Additional props to be passed to the underlying Message component, which represents the thread's parent message.



If true, focuses the MessageInput component on opening a thread.



If true, displays the thread at 100% width of its parent container, useful for mobile styling.



Custom thread input UI component used to override the optional Input value stored in ComponentContext or the MessageInputSmall default.



Custom thread message UI component used to override the default Message value stored in ComponentContext.


Did you find this page helpful?