Modal

The Modal component is used to display content in a layer above the rest of the page.

---

Usage

import { Modal } from '@newfold/ui-component-library';

const [isOpen, setIsOpen] = useState(false);

<>
    <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
    <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
    >
        <Modal.Panel>
            Modal component using Modal.Panel sub-compoenent.
        </Modal.Panel>
    </Modal>
</>

The Modal.Panel sub-component in the example above is used as a wrapper for the modal's content. It also offers a few things to help with appearance and functionality of the modal:

• Adds a listener to close the modal on overlay click/tap.
• Adds a background and padding to the content area.
• Adds a close button in the top right corner of the content area.

If you choose not to use the Modal.Panel sub-component, you will need to style the modal's content area yourself, add a close button and the overlay listener.

---

Title and Description

You can use the Modal.Title and Modal.Description sub-components to add a title and description to the modal.

const [isOpen, setIsOpen] = useState(false);

<>
    <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
    <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
    >
        <Modal.Panel>
            <Modal.Title className="nfd-mb-3">Title Using Modal.Title</Modal.Title>
            <Modal.Description className="nfd-text-sm nfd-text-slate-600">
                Modal description using Modal.Description sub-component.
            </Modal.Description>
        </Modal.Panel>
    </Modal>
</>

---

Props

Attribute	Type	Description	Default
isOpen*	bool |	If true, the modal will be open.	false
onClose*	function |	A function that will be called when the modal is closed.	-
children*	node |	The content of the modal.	-
position	center | top-center |	The position of the modal's content.	center
className	string |	-	-