Components

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`

Want to customize the component further?

Head to the full list of CSS Variables available for the Thread List →

Next up

Thread

Display a conversation anywhere on your page

Inbox

Find all messages relevant to you, in one handy place

On this page

When to use
How to use
Properties
Attributes & Events
CSS Variables