hook-modal
React Hook for making modal accessible.
Installation
Using yarn:
$ yarn add hook-modal
Using npm:
$ npm install hook-modal
Usage
import { createPortal } from "react-dom";
import { useModal } from "hook-modal";
import classes from "./Modal.module.css";
const Modal = ({
isOpen,
onClose,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
children,
}) => {
const props = useModal({ isOpen, onClose });
if (!isOpen) {
return null;
}
return createPortal(
<div className={classes.overlay}>
<div
{...props}
aria-labelledby={ariaLabelledby}
aria-describedby={ariaDescribedby}
className={classes.content}
>
{children}
</div>
</div>,
document.body,
);
};
Options
name | type | required | description | default |
---|
isOpen | boolean | required | Set to true if the modal is open | - |
onClose | () => void | required | Callback function to close the modal | - |
closeOnEsc | boolean | optional | If true , close the modal on Esc key pressed | true |
closeOnOutsideClick | boolean | optional | If true , close the modal on outside clicked | true |
Accessibility
- Set
role="dialog"
and aria-modal="true"
attributes to modal element - When modal is opened, focus the first focusable element in the modal
- While modal is open, non-modal elements are marked with
aria-hidden="true"
- While modal is open, scrolling of non-modal elements is disabled
- While modal is open, focus is trapped in modal
- Pressing the Esc key closes the modal
- Clicking outside the modal closes the modal
- Closing the modal returns focus to the element that was in focus before the modal was opened
License
MIT