Modal

An animated dialog that slides in from the bottom and fades in over a semi-transparent backdrop. It is rendered in a React portal (document.body) so it is unaffected by parent overflow or stacking contexts. Clicking the backdrop calls onClose. An optional close button is shown in the top-right corner by default. Supports full-screen mode.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | () => void | Yes | — | Callback fired when the backdrop or close button is clicked. | | children | ReactNode | Yes | — | Content rendered inside the modal window. | | showCloseButton | boolean | No | true | Shows or hides the built-in close button. | | closeIcon | string | No | 'close' | Icon name for the close button. | | closeIconSize | number | No | 24 | Size of the close icon. | | closeIconPaths | any[] | No | — | Custom SVG paths for the close icon. | | fullScreen | boolean | No | false | When true, the modal window fills the entire viewport. | | zIndex | number | No | 1000 | Base z-index for the modal backdrop. | | id | string | No | 'modal-root' | HTML id of the portal root element. | | onAnimationComplete | () => void | No | — | Fired 500 ms after isOpen changes (animation duration). | | backdropStyle | React.CSSProperties | No | — | Inline styles for the backdrop overlay. | | windowStyle | React.CSSProperties | No | — | Inline styles for the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Inline styles for the close button. |

Usage

Basic

import { useState } from 'react';
import Modal from '@/components/Modal';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <div style={{ padding: 24 }}>
          <h2>Confirm Action</h2>
          <p>Are you sure you want to proceed?</p>
          <button onClick={() => setOpen(false)}>Cancel</button>
        </div>
      </Modal>
    </>
  );
}

Full-screen modal

import { useState } from 'react';
import Modal from '@/components/Modal';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Full Screen</button>
      <Modal
        isOpen={open}
        onClose={() => setOpen(false)}
        fullScreen
        windowStyle={{ overflow: 'auto' }}
      >
        <div style={{ padding: 32 }}>Full screen content</div>
      </Modal>
    </>
  );
}