ThreadList

ThreadList lists the threads the current user takes part in. It reads client.threads, the thread manager, and renders one ThreadListItem per thread. Thread UI describes what it shows, and Replies and threads how the list loads and stays current.

Best practices

• Render it anywhere inside Chat. It needs no Channel.
• Render one ThreadList at a time. Each one reloads the list when it mounts, and deactivates client.threads when it unmounts, even while another list is still on screen.
• Change the rows through the ThreadListItemUI override key. Keep ThreadListItem, which gives each row its thread.
• Keep rows light. The list is virtualized with react-virtuoso, so rows mount and unmount as the user scrolls.
• Clicking a row opens the thread through useWorkspaceNavigation(). Without a layout that does nothing, so use ChatView or provide your own navigation, as in Threads without ChatView.

Basic usage

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

export const ThreadsPage = () => (
  <Chat client={client}>
    <ThreadList />
  </Chat>
);

ThreadList renders, from top to bottom:

• a header with the "Threads" title, and the HeaderEndContent override at its end while a thread is open;
• ThreadListUnseenThreadsBanner, while threads outside the list have new replies;
• the rows, a ThreadListItem for each thread in client.threads.paginator;
• ThreadListLoadingIndicator after the last row while the next page loads, or ThreadListEmptyPlaceholder when there are no threads;
• a NotificationList for the thread-list panel.

While the first page loads, it shows placeholder rows instead.

Selection in a ChatView workspace

With ChatView, render ThreadList in the threads view, next to a ThreadSlot. Clicking a row calls openThread(thread), and ChatView puts the thread in the view's thread slot. ⌘/ctrl-click asks the layout to open it beside the open one. The row of an open thread is marked with aria-selected.

import {
  MessageComposer,
  MessageList,
  ThreadHeader,
  ThreadList,
} from "stream-chat-react";
import { ChatView, ThreadSlot } from "stream-chat-react/slot-layout";

// Pass it to ChatView as `views={{ threads: <ThreadsView /> }}`, with a
// "thread" slot in the threads layout.
export const ThreadsView = () => (
  <>
    <ChatView.Selector />
    <ThreadList />
    <ThreadSlot slot="thread">
      <ThreadHeader />
      <MessageList />
      <MessageComposer />
    </ThreadSlot>
  </>
);

The Quick start builds the whole layout, and Workspace with ChatView explains views and slots.

Override keys

ThreadList reads these keys from WithComponents. Thread UI shows a replacement row.

Props

Related hooks

The thread list's own stores have no hook. Read client.threads.paginator.state for the threads and client.threads.state for unreadThreadCount and unseenThreadIds with useStateStore. See useThreadList, useThreadListItemContext and Thread and thread manager.