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
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>;
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']
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
component.
Type |
---|
object |
additionalMessageListProps
Additional props to be passed to the underlying MessageList
component.
Type |
---|
object |
additionalParentMessageProps
Additional props to be passed to the underlying Message
component, which represents the
thread's parent message.
Type |
---|
object |
additionalVirtualizedMessageListProps
Additional props for VirtualizedMessageList
component.
Type |
---|
object |
autoFocus
If true, focuses the MessageInput
component on opening a thread.
Type | Default |
---|---|
boolean | true |
enableDateSeparator
Controls injection of
UI component into underlyingMessageList
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 |
Message
Custom thread message UI component used to override the default Message
value stored in ComponentContext
.
Type | Default |
---|---|
component | ComponentContext['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 |