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.
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:
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>
optional
default: current URL
Threads created at this location are displayed in the list.
optional
Callback invoked when one of the threads in the list is clicked.
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.
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 |