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

See the source code below.

Properties

• children - React.Node - Component children, if any, are rendered as the modal's content.
• 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.

Example

import React, { 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>
  );
}