@dopt/react-modal

Overview

A React modal component for building experiences with Dopt.

You can use the modal 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-modal is a collection of components that you can use to structure and compose a modal.

`jsx
import Modal, { useModal } from '@dopt/react-modal';

function MyModal() {
const modal = useModal('my-flow.four-pandas-jam');

return (




{modal.title}


{modal.body}


{modal.dismissLabel}


{modal.completeLabel}




);
}
`

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

Props

$3

The root element of the modal. Extends HTMLDivElement.

| Name | Type | Description |
| ----------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
| active? | boolean | Determines the visibility of the component (default: false) |
| children? | ReactNode | The contents of the component |
| container? | HTMLElement | An HTML element to portal the component to (default: document.body) |
| lockScroll? | boolean | Determines if the document body should be scrollable when the component is active (default: true) |
| theme? | Theme | A theme definition to attach to the component |

$3

The overlay element that renders behind the modal content. Extends HTMLDivElement.

| Name | Type | Description |
| ---------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------- |
| container? | HTMLElement | An HTML element to portal the component to (default: document.body) |
| theme? | Theme | A theme definition to attach to the component |

$3

The modal 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 modal. 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 modal. 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 modal. Extends HTMLButtonElement.

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

$3

The body of the modal. 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 modal. 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 modal. 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 modal. 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 modal headlessly, you can import the hooks alone using @dopt/react-modal/hooks.

$3

- useModal(id: string): Modal

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

`jsx
import { useModal } from '@dopt/react-modal';
import RichText from '@dopt/react-rich-text';

function MyModal() {
const {
id,
title,
body,
completeLabel,
dismissLabel,
active,
completed,
dismissed,
complete,
dismiss,
} = useModal('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

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

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