@dopt/react-card v10.0.1

@dopt/react-card

Overview

A React card component for building experiences with Dopt.

You can use the card component out of the box as a pre-built component or break out and use it headlessly with your own UI component.

Learn more about how to use this component with Dopt →

Installation

ℹ️ If you are using a particular React framework like Next.js, please check out our framework specific docs.

# npm
npm install @dopt/react-card

# Yarn
yarn add @dopt/react-card

# pnpm
pnpm add @dopt/react-card

Usage

Modal

The default export from @dopt/react-card is a collection of components that you can use to structure and compose a modal.

import Card, { useCard } from '@dopt/react-card';

function MyCard() {
  const card = useCard('my-flow.four-pandas-jam');

  return (
    <Card.Root active={card.active}>
      <Card.Content>
        <Card.Header>
          <Card.Title>{card.title}</Card.Title>
          <Card.DismissIcon onClick={card.dismiss} />
        </Card.Header>
        <Card.Body>{card.body}</Card.Body>
        <Card.Footer>
          <Card.DismissButton onClick={card.dismiss}>
            {card.dismissLabel}
          </Card.DismissButton>
          <Card.CompleteButton onClick={card.complete}>
            {card.completeLabel}
          </Card.CompleteButton>
        </Card.Footer>
      </Card.Content>
    </Card.Root>
  );
}

Check out our card example and our headless card example for more in-depth usage.

Props

Root

The root element of the card. Extends HTMLDivElement.

Content

The card content. Extends HTMLDivElement.

Header

The header of the card. Extends HTMLElement.

Title

The title of the card. Extends HTMLHeadingElement.

DismissIcon

The dismiss icon of the card. Extends HTMLButtonElement.

Body

The body of the card. Extends HTMLDivElement.

Footer

The footer of the card. Extends HTMLElement.

DismissButton

The dismiss button of the card. Extends HTMLButtonElement.

CompleteButton

The complete button of the card. Extends HTMLButtonElement.

Hooks

If you are planning to only use the card headlessly, you can import the hooks alone using @dopt/react-card/hooks.

useCard

• useCard(id: string): Card

A React hook for accessing and updating a card's state and content.

import { useCard } from '@dopt/react-card';
import RichText from '@dopt/react-rich-text';

function MyCard() {
  const {
    id,
    title,
    body,
    completeLabel,
    dismissLabel,
    active,
    completed,
    dismissed,
    complete,
    dismiss,
  } = useCard('my-flow.four-pandas-jam');

  return (
    <div>
      <div id="states">
        <div>card.active: {active}</div>
        <div>card.completed: {completed}</div>
        <div>card.dismissed: {dismissed}</div>
      </div>
      <div id="actions">
        <button onClick={complete}>{completeLabel}</button>
        <button onClick={dismiss}>{dismissLabel}</button>
      </div>
      <div id="content">
        <div>card.title: {title}</div>
        <div>
          card.body: <RichText>{body}</RichText>
        </div>
        <div>card.completeLabel: {completeLabel}</div>
        <div>card.dismissLabel: {dismissLabel}</div>
      </div>
    </div>
  );
}

Styling API

Learn more about styling and theming →

Types

Card

Card state accessors and methods for updating state along with content configured in Dopt.

interface Card {
  id: string;

  title: string | null | undefined;
  body: RichText | null | undefined;

  completeLabel: string | null | undefined;
  dismissLabel: string | null | undefined;

  active: boolean;

  completed: boolean;
  dismissed: boolean;

  complete: () => void;
  dismiss: () => void;
}