Component API
Modalcontent

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