---
id: custom-threads-view
title: Custom Threads View
keywords: [cookbook, threads, view]
---

Our SDK comes with [`ChatView`](../components/utility-components/chat-view.mdx) 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](https://github.com/GetStream/stream-chat-js/blob/master/src/thread.ts)
- `Thread` - provides [`MessageList`](../components/core-components/message-list.mdx) with [`MessageInput`](../components/message-input-components/message-input.mdx) 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

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