Hire Us Get CoreUI PRO all-access →

React Modal Component API

Modal API

Markdown ChatGPT Claude

Explore the API reference for the React Modal component and discover how to effectively utilize its props for customization.

On this page

CModal

jsx 
import { CModal } from '@coreui/react-pro'
PropertyDefaultType
alignment-'top', 'center', undefined

Align the modal in the center or top of the screen.

backdroptrueboolean, 'static', undefined

Apply a backdrop on body while modal is open.

className-string, undefined

A string of all className you want applied to the base component.

container5.3.0+-Element, DocumentFragment, (() => Element | DocumentFragment | null), null, undefined

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+trueboolean, undefined

Puts the focus on the modal when shown.

fullscreen-boolean, 'sm', 'md', 'lg', 'xl', 'xxl', undefined

Set modal to covers the entire user viewport.

keyboardtrueboolean, undefined

Closes the modal when escape key is pressed.

onClose-(() => void), undefined

Callback fired when the component requests to be closed.

onClosePrevented-(() => void), undefined

Callback fired when the component requests to be closed.

onShow-(() => void), undefined

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.

portaltrueboolean, undefined

Generates modal using createPortal.

scrollable-boolean, undefined

Create a scrollable modal that allows scrolling the modal body.

size-'sm', 'lg', 'xl', undefined

Size the component small, large, or extra large.

transitiontrueboolean, undefined

Remove animation to create modal that simply appear rather than fade in to view.

unmountOnClosetrueboolean, undefined

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

visible-boolean, undefined

Toggle the visibility of modal component.

CModalBody

jsx 
import { CModalBody } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

CModalFooter

jsx 
import { CModalFooter } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

CModalHeader

jsx 
import { CModalHeader } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

closeButtontrueboolean, undefined

Add a close button component to the header.

CModalTitle

jsx 
import { CModalTitle } from '@coreui/react-pro'
PropertyDefaultType
ash5(ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 175 more ..., undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the base component.