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.

You can change the background and even the structure of the component. We built the component using grid-template-areas, so feel free to inspect the example message above and play around with the grid-area.

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 { Message } from "@cord-sdk/react";

export const Example = () => (
  <Message
    threadId={'my-awesome-thread-id'}
    messageId={'my-awesome-message-id'}
    onMessageClick={({threadID, messageID}) =>
      console.log("user clicked on message:", messageID, threadID)
    }
  />
);

<cord-message thread-id="my-awesome-thread-id" message-id="my-awesome-message-id">
</cord-message>

import { Message } from "@cord-sdk/react";

export const Example = () => (
  <Message
    threadId={'my-awesome-thread-id'}
    messageId={'my-awesome-message-id'}
    onMessageClick={({threadID, messageID}) =>
      console.log("user clicked on message:", messageID, threadID)
    }
  />
);

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