Message

When to use #

The <Message /> component renders a fully baked message. It gives your users an intuitive commenting UI that matches the experience of using a well-crafted chat in tools like Slack or Figma. You don't have to worry about how users add reactions, how they edit a message, how they delete one, or whether it is seen or unseen by the current user. We've got you covered! It will even handle timestamps that update live on the page while you're chatting.

This component starts you off with a 10/10 of message experience that you can customize as you need.

Do you want to build a chat? Maybe Slack-like threads? Or even a thread preview? Pair this component with our Thread API to access the data you need and create the experiences you want! Specifically, check out the get threads API and the get thread API to fetch relevant thread IDs and message IDs for a particular location or thread respectively.

How to use #

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleMessage({messageID}) {
    const message = thread.useMessage(messageID);

    return <betaV2.Message
      message={message}
    />;
  }

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleMessage({messageID}) {
    const message = thread.useMessage(messageID);

    return <betaV2.Message
      message={message}
    />;
  }

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

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleByIDMessage({messageID}) {
    return <betaV2.Message.ByID
      messageId={messageID}
    />;
  }

import { betaV2, thread } from "@cord-sdk/react";
  
  function ExampleByIDMessage({messageID}) {
    return <betaV2.Message.ByID
      messageId={messageID}
    />;
  }

View Source Code

Properties #

<Message /> #

<Message.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.

CSS customization #

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

There are more classes that 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 cord-.