| alignment | - | 'top', 'center' |
Align the modal in the center or top of the screen. |
| backdrop | true | boolean, 'static' |
Apply a backdrop on body while modal is open. |
| className | - | string |
A string of all className you want applied to the base component. |
| container5.3.0+ | - | Element, DocumentFragment, (() => Element | DocumentFragment | null), null |
Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default document.body. |
| focus4.10.0+ | true | boolean |
Puts the focus on the modal when shown. |
| fullscreen | - | boolean, 'sm', 'md', 'lg', 'xl', 'xxl' |
Set modal to covers the entire user viewport. |
| keyboard | true | boolean |
Closes the modal when escape key is pressed. |
| onClose | - | (() => void) |
Callback fired when the component requests to be closed. |
| onClosePrevented | - | (() => void) |
Callback fired when the component requests to be closed. |
| onShow | - | (() => void) |
Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. |
| portal | true | boolean |
Generates modal using createPortal. |
| scrollable | - | boolean |
Create a scrollable modal that allows scrolling the modal body. |
| size | - | 'sm', 'lg', 'xl' |
Size the component small, large, or extra large. |
| transition | true | boolean |
Remove animation to create modal that simply appear rather than fade in to view. |
| unmountOnClose | true | boolean |
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. |
| visible | - | boolean |
Toggle the visibility of modal component. |