---
id: thread
title: Thread
---

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`](./channel.mdx) 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`](../utility-components/window.mdx)
component. `Window` handles width changes in the main channel to ensure a seamless user experience when opening and
closing a `Thread`.

```jsx
<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`](../message-components/message.mdx)
and [`MessageInput`](../message-input-components/message-input.mdx) 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`.

:::note
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.
:::

```jsx
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.

```jsx
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>;
```

**Example 3** - To customize the combo of the thread's parent message and the `ThreadStart` separator, you can create a custom `ThreadHead` component and pass it to the `Channel` props. It then will be stored in the [`ComponentContext['ThreadHead']`](../contexts/component-context.mdx/#threadhead)

```jsx
const CustomThreadHead = (props) => {
  // render thread header UI component here
};

<Chat client={client}>
  <ChannelList />
  <Channel ThreadHead={CustomThreadHead} ThreadStart={CustomThreadStart}>
    <Window>
      <MessageList />
      <MessageInput />
    </Window>
    <Thread />
  </Channel>
</Chat>;
```

## Props

### additionalMessageInputProps

Additional props to be passed to the underlying [`MessageInput`](../message-input-components/message-input.mdx) component.

| Type   |
| ------ |
| object |

### additionalMessageListProps

Additional props to be passed to the underlying [`MessageList`](./message-list.mdx) component.

| Type   |
| ------ |
| object |

### additionalParentMessageProps

Additional props to be passed to the underlying [`Message`](../message-components/message.mdx) component, which represents the
thread's parent message.

| Type   |
| ------ |
| object |

### additionalVirtualizedMessageListProps

Additional [props for `VirtualizedMessageList`](../virtualized_list/#props) component.

| Type   |
| ------ |
| object |

### autoFocus

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

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### enableDateSeparator

Controls injection of <GHComponentLink text='DateSeparator' path='/DateSeparator/DateSeparator.tsx'/> UI component into underlying `MessageList` or `VirtualizedMessageList`.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### Input

Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.

| Type      | Default                                                                              |
| --------- | ------------------------------------------------------------------------------------ |
| component | <GHComponentLink text='MessageInputFlat' path='/MessageInput/MessageInputFlat.tsx'/> |

### Message

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

| Type      | Default                                                                  |
| --------- | ------------------------------------------------------------------------ |
| component | [ComponentContext['Message']](../contexts/component-context.mdx#message) |

### messageActions

Array of allowed message actions (ex: 'edit', 'delete', 'reply'). To disable all actions, provide an empty array.

| Type  | Default                                                              |
| ----- | -------------------------------------------------------------------- |
| array | ['edit', 'delete', 'flag', 'mute', 'pin', 'quote', 'react', 'reply'] |

### virtualized

If true, render the `VirtualizedMessageList` instead of the standard `MessageList` component.

| Type    |
| ------- |
| boolean |
