ChatView

ChatView is component itself and a set of components which allow for a drop-in implementation of different chat views - the channel view and thread view. This drop-in solution allows your users to easily switch between said views without having to implement such mechanism yourself. It consists of:

ChatView - a provider that holds information about the selected view
ChatView.Selector - selector which allows to set the required view
ChatView.Channels - a wrapper that renders its children when ChatView value is equal to channels
ChatView.Threads - a provider and a wrapper that renders its children when ChatView value is equal to threads, exposes ThreadsViewContext under which ThreadList can set an active thread
ChatView.ThreadAdapter - a wrapper which can access an active thread from the ThreadsViewContext and forwards it to the ThreadProvider

Basic Usage

import {
  Chat,
  ChatView,
  ChannelList,
  Channel,
  ThreadList,
  Thread,
  useCreateChatClient,
} from "stream-chat-react";

const App = () => {
  const chatClient = useCreateChatClient(/*...*/);

  if (!chatClient) return null;

  return (
    <Chat client={chatClient}>
      <ChatView>
        <ChatView.Selector />
        {/* Channel View */}
        <ChatView.Channels>
          <ChannelList />
          <Channel>{/*...*/}</Channel>
        </ChatView.Channels>
        {/* Thread View */}
        <ChatView.Threads>
          <ThreadList />
          <ChatView.ThreadAdapter>
            <Thread />
          </ChatView.ThreadAdapter>
        </ChatView.Threads>
      </ChatView>
    </Chat>
  );
};

Custom Threads View

In this guide we'll show how to implement custom threads view while utilising core components and hooks.

Required Components & Hooks

These components and hooks are required for your own implementation to work properly:

ThreadList
ThreadListItem - a provider for ThreadListItemUi with thread information, will be used to forward custom click event to the ThreadListItemUi button
ThreadProvider - "adapter" for Thread component to work properly with Thread instance
Thread - provides MessageList with MessageInput adjusted for threads
useActiveThread - takes your selected thread instance and handles its activity state (Thread.activate() & Thread.deactivate()) based on document focus and visibility

Building Custom Threads View

import {
  ThreadList,
  ThreadListItem,
  ThreadProvider,
  Thread,
  WithComponents,
  useActiveThread,
} from "stream-chat-react";

export const CustomThreadsView = () => {
  const [activeThread, setActiveThread] = useState(undefined);

  useActiveThread({ activeThread });

  return (
    <div className="custom-threads-view">
      <ThreadList
        virtuosoProps={{
          itemContent: (_, thread) => (
            <ThreadListItem
              thread={thread}
              threadListItemUiProps={{
                "aria-selected": thread === activeThread,
                onClick: () => {
                  setActiveThread(thread);
                },
              }}
            />
          ),
        }}
      />

      {activeThread && (
        <ThreadProvider thread={activeThread}>
          <Thread />
        </ThreadProvider>
      )}
    </div>
  );
};