ModalContent component
import { useState } from 'react'
import { Modal, ModalContent } from 'p12-modal'
export default function ModalContentExemple() {
const [isOpen, setIsOpen] = useState(false)
function onClose() {
setIsOpen(false)
}
return (
<>
<button onClick={() => setIsOpen(true)} style={{
border: 'black 2px solid',
padding: '8px 20px',
borderRadius: '50px',
}}>Open
</button>
<Modal
isOpen={isOpen}
ariaLabel="Successfull modal when employee is created."
onClose={onClose}
zIndexOverlay="z-40"
zIndexModal="z-50"
>
<div className="flex flex-col items-center h-full">
<div className="flex justify-end w-full">
<button onClick={onClose} className="p-4">X</button>
</div>
<ModalContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, eaque, ipsam. Aperiam, autem consequuntur culpa debitis eligendi excepturi expedita laborum nemo quam reprehenderit sapiente ullam veniam. Aliquid, beatae, quidem. Rerum.
</p>
</ModalContent>
</div>
</Modal>
</>
)
}
Props
classname
A custom CSS class to apply to the content area.
Type: string
children
The content to be displayed within the modal content area.
Type: ReactNode
dividers
Indicates whether to display dividers.
Type: boolean
Default: false