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>
);
};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 viewChatView.Selector- selector which allows to set the required viewChatView.Channels- a wrapper that renders its children whenChatViewvalue is equal tochannelsChatView.Threads- a provider and a wrapper that renders its children whenChatViewvalue is equal tothreads, exposesThreadsViewContextunder whichThreadListcan set an active threadChatView.ThreadAdapter- a wrapper which can access an active thread from theThreadsViewContextand forwards it to theThreadProvider
Basic Usage
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:
ThreadListThreadListItem- a provider forThreadListItemUiwith thread information, will be used to forward custom click event to theThreadListItemUibuttonThreadProvider- “adapter” for Thread component to work properly withThreadinstanceThread- providesMessageListwithMessageInputadjusted for threadsuseActiveThread- 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>
);
};