Modal

The modal is a container for some UI that is conditionally overlaid ontop of the application. It dims the background while opened. We may dismiss it by pressing escape, clicking outside or on the close button.

The modal works with an opened prop: it expects a boolean state variable, which effectively controls the display of the modal.

We may get such a boolean state variable with useDisclosure, so that we also get access to semantically correct open and close state mutation methods.

When the user acts to dismiss the modal, Mantine calls the handler we attached to the onClose prop: if the dismissal is approved, such handler should mutate the boolean state accordingly.

import { useDisclosure } from '@mantine/hooks';
import { Modal, Button } from '@mantine/core';

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

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

      <Button .. onClick={open}>
        Open modal
      </Button>
    </>
  );
}

The modal has a top section by default. It may have

• a close button, which we may remove with withCloseButton={false}.
• a title, which accepts any React node (not only text).

The inner content usually comes with controls: inputs and a submit button.