Message Content

Display the content of a message, we'll handle the rendering and attachments!


Live Demo

When to use #

The <MessageContent /> component renders the text and attachments of a message. It's a building block that allows you to create a full message and make it look native to your design system.

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 content above and play around with the grid-area.

Do you want to build a chat like messaging experience? Maybe Slack-like messages? Pair this component with our Thread API and User API to access the data you need and create the experiences you want! Specifically, check out the thread data API and the user data API to fetch relevant messages for a particular thread and the user information of the senders respectively. You can also pair this with our Avatar, Reactions and Timestamp components to enhance our existing Message experience.

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 { MessageContent } from "@cord-sdk/react";
import type { ClientMessageData } from "@cord-sdk/types";

export const Example = (message: ClientMessageData) => (
  <MessageContent
    content={message.content}
    attachments={message.attachments}
    edited={!!message.updatedTimestamp}
  />
);
Vanilla JavaScript:

<cord-message-content content="[{text: 'Hello!'}]" edited="false">
</cord-message-content>
import { MessageContent } from "@cord-sdk/react";
import type { ClientMessageData } from "@cord-sdk/types";

export const Example = (message: ClientMessageData) => (
  <MessageContent
    content={message.content}
    attachments={message.attachments}
    edited={!!message.updatedTimestamp}
  />
);
Copy

Properties #


content #

required
MessageContent
The content of the message you want to render. You can get a properly formatted value from the Threads API.

attachments #

optional
MessageAttachment[]
The attachments of the message you want to render. You can get a properly formatted value from the Threads API.

edited #

optional
boolean
Whether to mark the message as edited. Defaults to false.

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

Class nameDescription
.cord-message-content
Applied to the div containing the text and attachments of the message and any attachments. You can use grid-template-areas to modify the layout of the message content elements.
.cord-message-attachment
Applied to each attachment type div. The images, documents and annotations.
.cord-message-image-attachments
Applied to the div that contains image attachments.
.cord-message-document-attachments
Applied to the div that contains document attachments.
.cord-message-link-previews
Applied to the div that contains link previews.

Ask Cordy