Message Content

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.

How to use #

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

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

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