hook-modal

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