Custom Threads View

Our SDK comes with ChatView which allows for an easy integration of different views. 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>
  );
};