React Modal

A customizable React Modal component with various size options and keyboard support.

Installation

npm install @kyawthihasoe/react-modal
# or
yarn add @kyawthihasoe/react-modal

Usage

import { Modal } from '@kyawthihasoe/react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="My Modal"
      size="medium"
    >
      <p>This is the modal content</p>
    </Modal>
  );
}

Features

• Multiple size options (small, medium, large)
• Keyboard support (ESC to close)
• Click outside to close
• Customizable title
• Body scroll lock when modal is open
• TypeScript support

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | - | Controls the visibility of the modal | | onClose | () => void | Yes | - | Callback function when modal is closed | | title | string | No | - | Optional title for the modal | | children | ReactNode | Yes | - | Content to be displayed in the modal | | size | 'small' | 'medium' | 'large' | No | 'medium' | Size of the modal |

License

MIT