ThreadList

ThreadList is a component that displays a list of threads where the current user is a participant (this user either started a thread, replied to a thread or was tagged in a thread). It handles pagination and virtualization through the help of the virtualized list component. The rest of the business logic (data manipulation) lives within ThreadManager and Thread classes. Data represented through ThreadList are accessible from client instance (client.threads.state).

Basic Usage

The ThreadList component requires to be rendered within Chat component but apart from that does not require any other context to work.

import { Chat, ThreadList } from "stream-chat-react";

<Chat client={client}>
  {/*...*/}
  <ThreadList />
</Chat>;

For extended “out of the box” functionality ThreadList can be rendered within ChatView.Threads component where individual items within the list become “selectable” through the ThreadViewContext. Selected/active thread can be then accessed from this context as well. See ChatView documentation for extended functionality.

import {
  Chat,
  ChatView,
  ThreadList,
  useThreadsViewContext,
} from "stream-chat-react";

const SelectedThread = () => {
  const { activeThread } = useThreadsViewContext();

  return null;
};

<Chat client={client}>
  <ChatView>
    <ChatView.Selector />
    {/*...*/}
    <ChatView.Threads>
      <ThreadList />
      <SelectedThread />
    </ChatView.Threads>
  </ChatView>
</Chat>;

Props

virtuosoProps

Props to be passed to the underlying react-virtuoso virtualized list dependency.