@kyawthihasoe/react-modalbox
Version:
A customizable React modalbox component with sorting and pagination
56 lines (42 loc) • 1.23 kB
Markdown
A customizable React Modal component with various size options and keyboard support.
```bash
npm install @kyawthihasoe/react-modal
yarn add @kyawthihasoe/react-modal
```
```tsx
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>
);
}
```
- 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 |
MIT