Skip to main content


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.

Click to open the Modal

See the source code below.


  • 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


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.


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 (
isDarkTheme ? {
Button: darkButtonTheme,
Modal: darkModalTheme,
} : undefined
open ? (
<Modal onCancel={() => setOpen(false)}>
<h1>Example Modal</h1>
<Button onClick={() => setOpen(false)}>
Click to close the Modal
) : null
<Button onClick={() => setOpen(true)}>Click to open the Modal</Button>