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
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 (
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>

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,



  • cancelOnScrollingboolean — Opts-in to watch scrolling events on the browser window, and trigger onCancel callback (if provided) when the scrolling is detected.
  • childrenReact.ReactNode — Modal content.
  • containerStyleReact.CSSProperties — Inline style object to pass to the modal container.
  • dontDisableScrollingboolean — Opt-out from disabling the scrolling on the window when the modal is open.
  • onCancelfunction — The callback to trigger when user clicks outside the modal window, or presses «escape» key. It is expected to close the modal.
  • themeModalThemeAd 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.