ThreadContext

ThreadContext holds the thread a component renders in. Thread provides it through ThreadProvider, and useThreadContext() reads it. Components that work in both a channel and a thread, such as MessageList and MessageComposer, use it to find the thread's message list and composer.

Best practices

• Read it with useThreadContext(). It returns undefined outside a thread instead of throwing, so one component can render in a channel and in a thread.
• Let Thread provide it. Thread also loads the thread, checks that replies are on and gives the thread its own audio playback. ThreadProvider does none of these.
• Read the thread's state with useStateStore(thread?.state, selector). The context value is the thread itself, and it changes only when the thread does.
• Inside a thread, read the channel with useChannel() and the composer with useMessageComposerController(). Both return the thread's.
• In a ThreadList row, use useThreadListItemContext(). Rows aren't inside a Thread, so useThreadContext() returns undefined there.

Value

ThreadContextValue is the type of the value. ThreadContext itself is exported too, so useContext(ThreadContext) returns the same as useThreadContext().

ThreadProvider

ThreadProvider sets the thread for its children. Render it yourself to give a thread to components outside its Thread. This toolbar shows the header of the open thread in the app's top bar:

import type { Thread as StreamThread } from "stream-chat";
import { ThreadHeader, ThreadProvider } from "stream-chat-react";

export const ThreadToolbar = ({ thread }: { thread: StreamThread }) => (
  <ThreadProvider thread={thread}>
    <ThreadHeader />
  </ThreadProvider>
);

ThreadHeader reads the thread for its reply count and its close button, and its channel through useChannel().

Related hooks

See useThreadContext. The fields of thread.state are on Thread and thread manager.