Link copied to clipboard!

Thread List

Display all the threads in a given location

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

component-list-of-threads.png

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

Usage

  • 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" }}' />
    

Properties

Name Default Description
location current URL The location at which threads to list are created.

Events

Name Description
cord-thread-list:threadclick This event is fired when one of the threads from the list is clicked. The event.detail[0] is the thread-id of the clicked thread.

CSS Custom Properties

Name Default
--cord-composer-height-max 40vh
--cord-composer-height-min 40px
--cord-avatar-border-radius 4px
--cord-avatar-text-color --cord-color-base
--cord-avatar-background-color --cord-color-brand-primary
--cord-facepile-background-color --cord-color-base
--cord-facepile-avatar-border-width 2px
--cord-facepile-avatar-overlap 4px
--cord-tooltip-background-color --cord-color-brand-primary
--cord-tooltip-content-color --cord-color-base
--cord-annotation-pin-color --cord-color-brand-primary
--cord-annotation-pin-outline-color --cord-color-base
--cord-annotation-pin-z-index 2147483643
--cord-annotation-pin-rotate 0deg
--cord-annotation-arrow-color --cord-color-brand-primary
--cord-annotation-arrow-outline-color --cord-color-base
--cord-thread-list-gap 24px
--cord-thread-list-padding 8px
--cord-thread-background-color --cord-color-base
--cord-thread-border 1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius --cord-border-radius-medium
--cord-thread-send-button-font-size 14px
--cord-thread-send-button-text-color --cord-primary-button-content-color
--cord-thread-send-button-text-color--hover --cord-primary-button-content-color--hover
--cord-thread-send-button-text-color--active --cord-primary-button-content-color--active
--cord-thread-send-button-text-color--disabled --cord-primary-button-content-color--disabled
--cord-thread-send-button-background-color --cord-primary-button-background-color
--cord-thread-send-button-background-color--hover --cord-primary-button-background-color--hover
--cord-thread-send-button-background-color--active --cord-primary-button-background-color--active
--cord-thread-send-button-background-color--disabled --cord-primary-button-background-color--disabled
--cord-thread-send-button-padding 8px

In this section