Package Exports
- @chakra-ui/modal
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@chakra-ui/modal
A modal is a window overlaid on either the primary window or another dialog window. Contents behind a modal dialog are inert meaning that users cannot interact with content behind the dialog.
Installation
yarn add @chakra-ui/modal
# or
npm i @chakra-ui/modalImport components
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
} from "@chakra-ui/core"Usage
When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbled element, focus is set on the ModalContent.
function BasicUsage() {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay>
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</ModalOverlay>
</Modal>
</>
)
}Control Focus when Modal closes
When the dialog closes, it returns focus to the element that triggered. Set
finalFocusRef to element that should receive focus when the modal opens.
function ReturnFocus() {
const { isOpen, onOpen, onClose } = useDisclosure()
const finalRef = React.useRef()
return (
<>
<Box ref={finalRef} tabIndex={-1} aria-label="Focus moved to this box">
Some other content that'll receive focus on close.
</Box>
<Button mt={4} onClick={onOpen}>
Open Modal
</Button>
<Modal finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
<ModalOverlay>
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Lorem count={2} />
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</ModalOverlay>
</Modal>
</>
)
}