Modal

import { Modal, BaseModal } from '@dr.pogodin/react-utils';

The Modal component implements a simple modal window, visually themed using React Themes library. The base non-themed version of the component is also exposed as the BaseModal component.

Demo

Click to open the Modal

Demo Source Code

import { useState } from 'react';
import { useColorMode } from '@docusaurus/theme-common';
import { Button, Modal, ThemeProvider } from '@dr.pogodin/react-utils';

import darkButtonTheme from '../themes/buttons/dark.module.scss';
import darkModalTheme from '../themes/modals/dark.module.scss';

export default function ModalExample() {
  const [open, setOpen] = useState(false);
  const { isDarkTheme } = useColorMode();
  return (
    <ThemeProvider
      themes={
        isDarkTheme ? {
          Button: darkButtonTheme,
          Modal: darkModalTheme,
        } : undefined
      }
    >
      {
        open ? (
          <Modal onCancel={() => setOpen(false)}>
            <h1>Example Modal</h1>
            <Button onClick={() => setOpen(false)}>
              Click to close the Modal
            </Button>
          </Modal>
        ) : null
      }
      <Button onClick={() => setOpen(true)}>Click to open the Modal</Button>
    </ThemeProvider>
  );
}

info

By default, an open modal adds a CSS class with overflow: hidden rule to the document <body>, which disables page scrolling (and hides scrollbars) when a modal is open. This can be opted out by dontDisableScrolling prop; also cancelOnScrolling allows to bind onCancel callback (if any) to the window scrolling events when the modal is displayed,

Properties

Optional:

cancelOnScrolling — boolean — Opts-in to watch scrolling events on the browser window, and trigger onCancel callback (if provided) when the scrolling is detected.
children — React.ReactNode — Modal content.
dontDisableScrolling — boolean — Opt-out from disabling the scrolling on the window when the modal is open.
onCancel — function — The callback to trigger when user clicks outside the modal window, or presses «escape» key. It is expected to close the modal.
style — React.CSSProperties — Inline style object to pass to the modal container.
testId — string | undefined — This value is assigned to the data-testid attribute of the modal's container, to facilitate testing with testing-library. It is optimized out from production builds.
testIdForOverlay — string | undefined — Similar to testId, but attaches data-testid to the modal overlay over the page content.
theme — ModalTheme — Ad hoc visual theme.
Other props of themed components

Deprecated Properties

containerStyle — React.CSSProperties — Inline style object to pass to the modal container — Use style property instead.

ModalTheme

See React Themes documentation to learn how the visual theming works. The valid theme keys for Modal component are:

container - The modal's window container.
overlay - The semi-transparent overlay that shades the background under the open modal, and handles clicks outside the modal when that is open.

tip

The default z-index of modal overlay (998) is exposed from the library as $zIndexOfDefaultModalOverlay SCSS variable in SCSS Mixins. Any UI element with lower z-index will be effectively blocked when the modal is open. By default, the main modal container itself has its z-index by 1 larger than $zIndexOfDefaultModalOverlay (i.e. 999).

Properties​

ModalTheme​

Properties

ModalTheme