Modal

Overlay some UI on top of the application. Dim the rest of the app while opened.

<Modal opened={opened} onClose={close}>
    {/* Modal content */}
</Modal>

Modal works with some boolean state, that controls the display. We subscribe to the state through the opened prop.

Modal also wants an onClose handler, which it calls on dismissal attempts. The handler, if it authorizes the dismissal, changes the state back to its initial value.

Mantine's useDisclosure is a good fit to create the Modal's boolean state variable and the accompanying helper functions, open and close:

const [opened, { open, close }] = useDisclosure(false)

dismissal attempts

Modal considers the following actions as attempts to dismiss:

• press the escape key
• click outside
• click the close button (if displayed)

form elements

The inner content is commonly form elements: inputs and a submit button.

defaults

• the modal has a top section with a close button
• radius adheres to theme.defaultRadius.

overrides

• remove the close button with withCloseButton, which can remove the header altogether.
• center the modal with centered.
• add a title, which can be any React node (not text-only).
• control the dimming with overlayProps. The dimming is done by an underlying <Overlay>.
• more overrides