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