Modal

Overlay dialogs with ASCII-style borders for important messages and user interactions.

Docs•API Reference

Click any button to open a modal. Press ESC or click outside to close (except static).

Installation

npm install react-ascii-ui

Usage

import { AsciiModal, AsciiButton } from 'react-ascii-ui';

export default function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <AsciiButton onClick={() => setIsOpen(true)}>
        Open Modal
      </AsciiButton>
      
      <AsciiModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="My Modal"
      >
        <p>Modal content goes here</p>
      </AsciiModal>
    </>
  );
}

Examples

Basic Modal

<AsciiModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Basic Modal"
>
  <p>Your content here</p>
</AsciiModal>

Different Sizes

{/* Small modal */}
<AsciiModal size="sm" isOpen={isOpen} onClose={onClose}>
  <p>Small modal content</p>
</AsciiModal>

{/* Large modal */}
<AsciiModal size="lg" isOpen={isOpen} onClose={onClose}>
  <p>Large modal with more space</p>
</AsciiModal>

Static Backdrop

<AsciiModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  backdrop="static"
  title="Cannot click outside to close"
>
  <p>This modal requires explicit close action</p>
</AsciiModal>

Without Close Button

<AsciiModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  showCloseButton={false}
  title="Custom Controls"
>
  <p>Use your own close button</p>
  <AsciiButton onClick={() => setIsOpen(false)}>
    Custom Close
  </AsciiButton>
</AsciiModal>

API Reference

Props

PropTypeDefaultDescription
isOpenboolean-Whether the modal is visible
onClose() => void-Callback function called when modal should close
titlestring-Optional title displayed in modal header
childrenReact.ReactNode-Modal body content
size'sm' | 'md' | 'lg''md'Modal size variant
showCloseButtonbooleantrueWhether to show the [X] close button
backdrop'static' | 'clickable''clickable'Whether clicking outside closes the modal
classNamestring""Additional CSS classes for modal container

Features

  • ESC key support: Press ESC to close modal
  • Body scroll lock: Prevents background scrolling when modal is open
  • Focus management: Proper keyboard navigation and accessibility
  • Backdrop control: Choose between clickable and static backgrounds
  • Size variants: Small, medium, and large modal sizes

Modal automatically handles accessibility features including focus management and ARIA attributes.