Modal

Modal / Dialog component, displays when isOpen is true.

Uses the Reach UI Modal component to cover accessibility requirements.

import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  useDisclosure,
} from 'minerva-ui'

Preview

Source

() => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <Button onClick={onOpen}>Open Modal</Button> <Modal isOpen={isOpen} onClose={onClose} overflow="hidden"> <ModalHeader onClose={onClose}>Hello World!</ModalHeader> <ModalBody> Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Sunt ad dolore quis aute consequat. </ModalBody> <ModalFooter> <Flex px={6} py={3} flexDirection={['column', 'row-reverse']} bg="gray.50" radiusBottom="5px" > <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}> Submit </Button> </Flex> </ModalFooter> </Modal> </> ); }

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} overflow="hidden">
        <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
        <ModalBody>
          Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco
          deserunt aute id consequat veniam incididunt duis in sint irure nisi.
          Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor
          esse quis. Sunt ad dolore quis aute consequat.
        </ModalBody>
        <ModalFooter>
          <Flex
            px={6}
            py={3}
            flexDirection={['column', 'row-reverse']}
            bg="gray.50"
            radiusBottom="5px"
          >
            <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']}>
              Submit
            </Button>
          </Flex>
        </ModalFooter>
      </Modal>
    </>
  );
}

Customize ModalOverlay or ModalContent

import {
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'minerva-ui'

Preview

Source

() => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <Button onClick={onOpen}>Open Modal</Button> <ModalOverlay isOpen={isOpen} onDismiss={onClose} bg="rgba(0, 150, 136, 0.31)" > <ModalContent isOpen={isOpen} onClose={onClose} maxWidth="80vw" overflow="hidden" > <ModalHeader onClose={onClose}>Hello World!</ModalHeader> <ModalBody> Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Sunt ad dolore quis aute consequat. </ModalBody> <ModalFooter bg="gray.50"> <Flex px={6} py={3} flexDirection={['column', 'row-reverse']} bg="gray.50" radiusBottom="5px" > <Button onClick={onClose} boxShadow="base" width={['100%', 'auto']} > Submit </Button> </Flex> </ModalFooter> </ModalContent> </ModalOverlay> </> ); }

() => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <ModalOverlay
        isOpen={isOpen}
        onDismiss={onClose}
        bg="rgba(0, 150, 136, 0.31)"
      >
        <ModalContent
          isOpen={isOpen}
          onClose={onClose}
          maxWidth="80vw"
          overflow="hidden"
        >
          <ModalHeader onClose={onClose}>Hello World!</ModalHeader>
          <ModalBody>
            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud
            ullamco deserunt aute id consequat veniam incididunt duis in sint
            irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit
            officia tempor esse quis. Sunt ad dolore quis aute consequat.
          </ModalBody>
          <ModalFooter bg="gray.50">
            <Flex
              px={6}
              py={3}
              flexDirection={['column', 'row-reverse']}
              bg="gray.50"
              radiusBottom="5px"
            >
              <Button
                onClick={onClose}
                boxShadow="base"
                width={['100%', 'auto']}
              >
                Submit
              </Button>
            </Flex>
          </ModalFooter>
        </ModalContent>
      </ModalOverlay>
    </>
  );
}

Animations

Animations are included by default in the <GlobalStyles /> component:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideup {
  from {
    transform: translateY(20px);
  }

  to {
    transform: translateY(0);
  }
}

[data-reach-dialog-overlay] {
  animation: fadein 0.18s;
}

[data-reach-dialog-content] {
  animation: slideup 0.18s;
}

Props

<Modal />

Name	Type	Is Required	Default	Description
isOpen	boolean	required	false	Sets if modal is open
onClose	function	optional	none	Action to take when modal is closed

<ModalHeader />

Name	Type	Is Required	Default	Description
onClose	function	optional	none	Action to take when modal is closed
children	node	optional	none
allowPinchZoom	boolean	optional	true	Handle zoom/pinch gestures on iOS devices.

<ModalBody /> and <ModalFooter />

Name	Type	Is Required	Default	Description
children	node	optional	none

<ModalContent />

Name	Type	Is Required	Default	Description
isOpen	boolean	required	false	Sets if modal is open
onClose	function	optional	none	Action to take when modal is closed

<ModalOverlay />

Name	Type	Is Required	Default	Description
isOpen	boolean	required	false	Sets if modal is open
onDismiss	function	optional	none	Action to take when modal is closed
allowPinchZoom	boolean	optional	true	Handle zoom/pinch gestures on iOS devices.