An accessible dialog (modal) component for React & Chakra UI
npm install @chakra-ui/modalA 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.
``sh
yarn add @chakra-ui/modal
npm i @chakra-ui/modal
`
`jsx`
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
} from "@chakra-ui/react"
When the modal opens, focus is sent into the modal and set to the first tabbable
element. If there are no tabbed element, focus is set on the ModalContent.
`jsx
function BasicUsage() {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<>
)
}
`
When the dialog closes, it returns focus to the element that triggered. Set
finalFocusRef to element that should receive focus when the modal opens.
`jsx
function ReturnFocus() {
const { isOpen, onOpen, onClose } = useDisclosure()
const finalRef = React.useRef()
return (
<>
Some other content that'll receive focus on close.
)
}
`
AlertDialog component is used interrupt the user with a mandatory confirmation
or action.
`sh
yarn add @chakra-ui/alert-dialog
npm i @chakra-ui/alert-dialog
`
`jsx`
import {
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
} from "@chakra-ui/react"
AlertDialog requires that you provide the leastDestructiveRef prop.
Based on
WAI-ARIA specifications,
focus should be placed on the least destructive element when the dialog opens,
to prevent users from accidentally confirming the destructive action.
`jsx
function AlertDialogExample() {
const [isOpen, setIsOpen] = React.useState()
const onClose = () => setIsOpen(false)
const cancelRef = React.useRef()
return (
<>
leastDestructiveRef={cancelRef}
onClose={onClose}
>
Delete Customer
Are you sure? You can't undo this action afterwards.
)
}
`
Using the above example will throw a typescript error. You'll want to modify the
type of the useRef hook to the HTML element you're placing the focus on and
default the value to null.
`tsx`
const cancelRef = React.useRef
The Drawer component is a panel that slides out from the edge of the screen. It
can be useful when you need users to complete a task or view some details
without leaving the current page.
`sh
yarn add @chakra-ui/modal
npm i @chakra-ui/modal
`
`jsx`
import {
Drawer,
DrawerOverlay,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerBody,
DrawerCloseButton,
} from "@chakra-ui/react"
By default, focus is placed on DrawerCloseButton when the drawer opens.
`jsx
function DrawerExample() {
const { isOpen, onOpen, onClose } = useDisclosure()
const btnRef = React.useRef()
return (
<>
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
>
)
}
``