React Modal Component API
Modal API
Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.
CModal#
import { CModal } from '@coreui/react'// orimport CModal from '@coreui/react/src/components/modal/CModal'| Property | Default | Type |
|---|---|---|
| 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. | ||
| container#5.3.0+ | - | Element, DocumentFragment, (() => Element | DocumentFragment) |
Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default | ||
| focus#4.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. | ||
CModalBody#
import { CModalBody } from '@coreui/react'// orimport CModalBody from '@coreui/react/src/components/modal/CModalBody'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CModalFooter#
import { CModalFooter } from '@coreui/react'// orimport CModalFooter from '@coreui/react/src/components/modal/CModalFooter'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CModalHeader#
import { CModalHeader } from '@coreui/react'// orimport CModalHeader from '@coreui/react/src/components/modal/CModalHeader'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
| closeButton# | true | boolean |
Add a close button component to the header. | ||
CModalTitle#
import { CModalTitle } from '@coreui/react'// orimport CModalTitle from '@coreui/react/src/components/modal/CModalTitle'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the base component. | ||