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

Date and time formatting

Dialog Management