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';

Customize ModalOverlay or ModalContent

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

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 />

NameTypeIs RequiredDefaultDescription
isOpenbooleanrequiredfalseSets if modal is open
onClosefunctionoptionalnoneAction to take when modal is closed

<ModalHeader />

NameTypeIs RequiredDefaultDescription
onClosefunctionoptionalnoneAction to take when modal is closed
childrennodeoptionalnone
allowPinchZoombooleanoptionaltrueHandle zoom/pinch gestures on iOS devices.

<ModalBody /> and <ModalFooter />

NameTypeIs RequiredDefaultDescription
childrennodeoptionalnone

<ModalContent />

NameTypeIs RequiredDefaultDescription
isOpenbooleanrequiredfalseSets if modal is open
onClosefunctionoptionalnoneAction to take when modal is closed

<ModalOverlay />

NameTypeIs RequiredDefaultDescription
isOpenbooleanrequiredfalseSets if modal is open
onDismissfunctionoptionalnoneAction to take when modal is closed
allowPinchZoombooleanoptionaltrueHandle zoom/pinch gestures on iOS devices.