React Accessible Modal
A React component that creates an accessible modal.
What does it do?
- Attaches the modal to the top-level of the
<body>element and hides all other top-level elements via thearia-hiddenattribute. - Traps the user's keyboard focus within the modal. The user can close modal using either the close button or the Escape key.
Usage example
import React, { useState } from 'react';
import Modal from '@jenwachter/react-accessible-modal';
export default () => {
const [open, setOpen] = useState(null);
return (
<>
<button onClick={() => setOpen(!open)}>Open</button>
<Modal isOpen={open} onClose={() => setOpen(false)}>
<p>this is the contents of the modal</p>
</Modal>
</>
);
};Modal props
-
containerClasses: array of classes to apply to the modal container. Default:['modal-container'] -
contentClasses: array of classes to apply to the modal content container. Default:['modal-content'] -
isOpen: boolean describing if the modal is open (true) or closed (false). Default:false -
onClose: callback to run when the modal is closed. Default: none