Cord LogoDocs
Sign inStart now

Thread List

Components /
Ask the Community

Display all the threads in a given location

Live Demo

When to use #

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

This component pairs well with:

How to use #

React:
import { ThreadList } from "@cord-sdk/react";

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

export const Example = () => {
  return (
    <ThreadList
      location={{ "page": "index" }}
      onThreadClick={(threadId, threadSummary) =>
        console.log("user clicked on thread:", threadId, threadSummary)
      }
      style={{ width: "300px" }}
    />
  );
};
Copy

Properties #

location #

optional
string
The location of a Thread List controls which threads it should show.
If unset, this field will default to the current URL for the page.

showScreenshotPreviewInMessage #

optional
boolean
Toggles whether screenshot previews are shown in messages in the Thread List. The default setting is set to true.

showPlaceholder #

optional
boolean
If false, when the thread list has no threads, it will show a completely empty container. If set to true, it will instead show a placeholder, containing a description of the types of threads a user will see.
The default value is true.

highlightOpenFloatingThread #

optional
boolean
Toggles whether, if there is a FloatingThread component at the same location, opening a thread should highlight that thread in the ThreadList. The color of the highlight is configurable with CSS. The default setting is set to true. If highlightThreadId is passed in, it will disable highlightOpenFloatingThread.

highlightThreadId #

optional
string
Passing a thread id will highlight that thread in the ThreadList if it exists. The color of the highlight is configurable with CSS. If highlightThreadId is used, it will disable highlightOpenFloatingThread.

filter #

optional
ThreadListFilter
A serialized JSON object that can be used to filter the threads in the ThreadList.

This is an object with the following fields:

Show property details

partialMatch #

optional
boolean
If false, only threads that exactly match the provided location are shown. If true, threads in any partially matching location are also shown.
The default value is false.

onThreadClick #

optional
function
Callback invoked when one of the threads in the list is clicked. The callback is passed two arguments: the ID of the thread which was clicked, and the summary of the thread which was clicked. For example, you could use this event to scroll the clicked thread into view.

onLoading #

optional
function
Callback invoked when the component begins loading. Use onRender to determine when loading is complete.

onRender #

optional
function
Callback invoked when the component has finished rendering. Use onLoading to determine when a component begins loading.

onThreadMouseEnter #

optional
function
Callback invoked when one of the threads fires a mouseenter event. The callback is passed two arguments: the threadID of the thread and an object of type {thread: ThreadSummary} containing the thread summary. For example, you could use this event to highlight the section of a webpage being discussed in the hovered thread.

onThreadMouseLeave #

optional
function
Callback invoked when the cursor leaves one of the threads. The callback is passed two arguments: the threadID of the thread and an object of type {thread: ThreadSummary} containing the thread summary. For example, you could use this event to terminate the special behavior initiated with onThreadMouseEnter.

onThreadResolve #

optional
function
Callback invoked when one of the threads fires a resolved event. The callback is passed an object of type {threadID: string; thread: ThreadSummary} containing the thread's ID and summary. For example, you could use this event to remove the visibility of a thread when it's marked as resolved

onThreadReopen #

optional
function
Callback invoked when the cursor leaves one of the threads. The callback is passed an object of type {threadID: string; thread: ThreadSummary} containing the thread's ID and summary. For example, you could use this event to terminate the special behavior initiated with onThreadResolve.

Want to customize the components further?

Head to our CSS customization guide

Not finding the answer you need? Ask our Developer Community

Ask Cordy