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

``bash


npm

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

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

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

return (



{card.title}


{card.body}


{card.dismissLabel}


{card.completeLabel}




);
}
`

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

Props

$3

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 |

$3

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 |

$3

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 |

$3

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 |

$3

The dismiss icon of the card. Extends HTMLButtonElement.

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

$3

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 |

$3

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 |

$3

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 |

$3

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.

$3

- useCard(id: string): Card

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

`jsx
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 (


| 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

$3

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

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