Message

Put messages wherever you want. Don't worry, we'll handle reactions, as well as deleted, editing and unread states for you!


Live Demo

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.

Looking for the message data format?

Check out the how-to guide for examples of the Cord message data format


How to use #

React:
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)
    }
  />
);
Vanilla JavaScript:

<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)
    }
  />
);
Copy

Properties #


threadId #

required
string
The thread ID containing the message you want to render.

messageId #

optional
string
The message ID for the message you want to render. This ID has to be one of the messages included in the thread you have provided.
If you do not provide the messageId, the message component will render the first message of this thread.

markAsSeen #

optional
boolean

If true, then this message and its containing thread will automatically be marked as seen when they have been visible in the browser for about one second. If false, this behavior is disabled.

The default is true.


isEditing #

optional
boolean

If true, then this message component will render a Composer that can be used to edit the message content. This can be used together with the onMessageEditEnd callback to create a custom edit button instead of the default one in message options.

The default is false.


onClick #

optional
function
Callback invoked when a user clicks anywhere on the message, but not on the reactions or options menu. The callback is passed the threadId and the messageId of the message which was clicked as an argument.

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.

onMouseEnter #

optional
function
Callback invoked when the cursor enters a message. The message area consists of the avatar, the name, the message content, the options menu and the reactions.

onMouseLeave #

optional
function
Callback invoked when the cursor leaves a message. The message area consists of the avatar, the name, the message content, the options menu and the reactions.

onEditStart #

optional
function
Callback invoked when a user starts editing a message. Use onEditEnd to determine when editing is complete.

onEditEnd #

optional
function
Callback invoked when a user completes editing a message. Use onEditStart to determine when editing begins.

onThreadResolve #

optional
function
Callback invoked when a user resolves a thread.
The callback is passed the threadId of the thread being resolved.
Note: This action is only available from the first message of each thread.

onThreadReopen #

optional
function
Callback invoked when a user reopens a thread.
The callback is passed the threadId of the thread being reopened.
Note: This action is only available from the first message of each thread.

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

Do you need more control? Are some messages more important, or do you want system messages to look different from normal users' messages?

We add any classes present in the message's extraClassnames field.

You can combine this field and CSS for achieving greater customization. This allow you to make messages look different from each others.

Class nameDescription
.cord-message
Applied to the container div. You can use grid-template-areas to modify the layout of the message.
.cord-author-name
Applied to the div containing the name of the author of the message.
.cord-message-content
Applied to the div containing the text of the message and any attachments.
.cord-options-menu-trigger
Applied to the div which appears on hover on the top right of the message.
.cord-sent-via-icon
Applied to the div which appears when the message was sent via Slack or via Email.
.cord-deleted-icon
Applied to the div that contains the icon which appears when users delete a message.
.cord-deleted-message-text
Applied to the div that contains the label that appears when users delete a message.
.cord-undo-delete-button
Applied to the "undo" button that appears when users delete a message.

Ask Cordy