Link copied to clipboard!
Mobile navigation button - closed state

Thread List

Display all the threads in a given location


This component is currently in BETA mode, and its default design and customizability options are subject to change.

When to use

The ThreadList component renders the list of threads created with a given location (see the location property in the Thread component). It provides a quick way for users to view multiple conversations.

This component pairs well with:


How to use

  • import { ThreadList } from "@cord-sdk/react";
    
    export const Example = () => {
      return (
        <ThreadList
          location={{ "page": "index" }}
          onThreadClick={(threadId) =>
            console.log("user clicked on thread:", threadId)
          }
        />
      );
    };
    
    
  • <cord-thread-list location='{{ "page": "index" }}'></cord-thread-list>
    

Properties

Attributes & Events

Properties
location optional default: current URL

Threads created at this location are displayed in the list.

onThreadClick optional

Callback invoked when one of the threads in the list is clicked.

Attributes
location optional default: current URL

Threads created at this location are displayed in the list.

Events
cord-thread-list:threadclick

This event is fired when one of the threads in the list is clicked. The event.detail[0] is the thread-id of the clicked thread.


CSS Variables

These can be used to customize the component, you can learn more about customization here

Name Default Value
--cord-thread-background-color --cord-color-base
#FFFFFF
--cord-thread-border 1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius --cord-border-radius-medium
4px
--cord-thread-list-gap 24px
--cord-thread-list-padding 8px

Next up