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

Name	Type	Description
active?	boolean	Determines the visibility of the component (default: false)
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

Content

The card content. Extends HTMLDivElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

Header

The header of the card. Extends HTMLElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

Title

The title of the card. Extends HTMLHeadingElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

DismissIcon

The dismiss icon of the card. Extends HTMLButtonElement.

Name	Type	Description
theme?	Theme	A theme definition to attach to the component

Body

The body of the card. Extends HTMLDivElement.

Name	Type	Description
children?	RichText	The rich text contents of the component
theme?	Theme	A theme definition to attach to the component

Footer

The footer of the card. Extends HTMLElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

DismissButton

The dismiss button of the card. Extends HTMLButtonElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

CompleteButton

The complete button of the card. Extends HTMLButtonElement.

Name	Type	Description
children?	ReactNode	The contents of the component
theme?	Theme	A theme definition to attach to the component

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 →

Name	Selector	Description
root	.dopt-modal	Root element
overlay	.dopt-modal__overlay	Overlay shown underneath content
content	.dopt-modal__content	Content container
header	.dopt-modal__header	Header containing title and dismiss icon
title	.dopt-modal__title	Title heading
dismissIcon	.dopt-modal__dismiss-icon	Dismiss icon button
body	.dopt-modal__body	Body content
footer	.dopt-modal__footer	Footer containing dismiss and complete buttons
dismissButton	.dopt-modal__dismiss-button	Dismiss button
completeButton	.dopt-modal__complete-button	Complete button

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