Skip to main content

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.
  • containerStyle — React.CSSProperties — Inline style object to pass to the modal container.
  • 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.
  • theme — ModalTheme — Ad hoc visual theme.
  • Other props of themed components

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.