UNPKG

@kyawthihasoe/react-modalbox

Version:

A customizable React modalbox component with sorting and pagination

56 lines (42 loc) 1.23 kB
# React Modal A customizable React Modal component with various size options and keyboard support. ## Installation ```bash npm install @kyawthihasoe/react-modal # or yarn add @kyawthihasoe/react-modal ``` ## Usage ```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> ); } ``` ## 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