@cometchat/cards-react

CometChat Card Renderer React

A React component for rendering CometChat Card Schema JSON. This is a thin wrapper around @cometchat/cards that mounts the vanilla DOM output into a React component with full lifecycle management.

What it does

• Renders Card Schema JSON as a native React component
• Reactively re-renders on prop changes (cardJson, themeMode, themeOverride, logLevel)
• Automatically cleans up DOM and theme observers on unmount
• Emits clicks on buttons, icon buttons, and links to your callback as typed CometChatCardActionEvents

The package is a pure renderer. It doesn't talk to the CometChat SDK, doesn't manage message lifecycle, and doesn't know about your app's routing. You decide what each action does.

Installation

npm install @cometchat/cards-react

@cometchat/cards-react includes @cometchat/cards as a dependency — no need to install both.

Peer Dependencies

• react >= 17.0.0
• react-dom >= 17.0.0

Usage

import { CometChatCardView } from "@cometchat/cards-react";

function CardMessage({ cardJson }: { cardJson: string }) {
  return (
    <CometChatCardView
      cardJson={cardJson}
      themeMode="auto"
      onAction={(event) => {
        console.log("action:", event.action.type, "from", event.elementId);
      }}
    />
  );
}

Getting Started

Refer to the Integration Steps to integrate the react cards into your app.

Prerequisites

• Node.js >= 14.17.0
• npm >= 7
• React >= 17.0.0

Help and Support

For integration issues, create a support ticket or seek real-time support via the CometChat Dashboard.