Thread

When to use #

The Thread component renders a single conversation thread, or a message composer to create a new thread. Threads contain everything your users need to have a conversation.

This component pairs well with:

• Thread List →
• Page Presence →
• Inbox Launcher →

How to use #

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleThread({threadID}) {
    const threadData = thread.useThread(threadID);
    // If you need to modify some info from your thread, this is the place to do it

    return <betaV2.Thread
      thread={threadData}
      showHeader
      style={{
        // Recommended so that long threads scroll instead 
        //of disappearing off-screen
        maxHeight: "400px", 
        // Recommended so that threads don't stretch horizontally 
        // based on their content
        width: "300px",
      }}
    />;
  }

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleThread({threadID}) {
    const threadData = thread.useThread(threadID);
    // If you need to modify some info from your thread, this is the place to do it

    return <betaV2.Thread
      thread={threadData}
      showHeader
      style={{
        // Recommended so that long threads scroll instead 
        //of disappearing off-screen
        maxHeight: "400px", 
        // Recommended so that threads don't stretch horizontally 
        // based on their content
        width: "300px",
      }}
    />;
  }

Alternatively, you can use Thread.ByID to render a thread given its ID. We'll do the data fetching for you.

import { betaV2 } from "@cord-sdk/react";
import NextUp from 'docs/server/ui/nextUp/NextUp.tsx';
import NextUpCard from 'docs/server/ui/nextUp/NextUpCard.tsx';

function ExampleThread({threadID}) => {
  return (
    <betaV2.Thread.ByID
      threadID={threadID}
    />
  );
};

import { betaV2 } from "@cord-sdk/react";
import NextUp from 'docs/server/ui/nextUp/NextUp.tsx';
import NextUpCard from 'docs/server/ui/nextUp/NextUpCard.tsx';

function ExampleThread({threadID}) => {
  return (
    <betaV2.Thread.ByID
      threadID={threadID}
    />
  );
};

View Source Code

Properties #

<Thread> #

<Thread.ByID> #

Customization with Replacements #

If you want to customize your component, you can customize the CSS (see below), but you can also switch parts of the component for your own ones with out Replacements API.

These are the components you can replace in the message. Some are better understood in context. We suggest inspecting the component with your browser's developer tools to find elements with a data-cord-replace attribute.

If you want to customize the composer, please refer to the section on customizing the <Composer/>. If you want to customize the messages shown, see the details in <Message/>.

CSS customization #

If you want to customize this component, you can target some classes with the cord- prefix in your app's CSS. These are guaranteed to be stable.

These classes are best understood in context. We suggest inspecting the component with your browser's developer tools to view everything. You can target any classes starting with the prefix cord-.