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>
  );
};