As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web. We seek to keep the focus on accessibility while providing a functional, …

react-modal aims to be fully accessible, using the WAI-ARIA guidelines to support users of assistive technologies. This page describes some of react-modal's accessibility-oriented …

Sometimes it may be preferable to use CSS classes rather than inline styles. react-modal can be configured to use CSS classes to style the modal content and overlay, as well as the …

Styles passed into the Modal via the style prop are merged with the defaults. The default styles are defined in the Modal.defaultStyles object and are shown below.

Run local The following sub-sections contain several examples of basic usage, hosted on CodePen. The examples directory in the project root also contains some examples which you …

This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open. You'll notice in this …

Using CSS classes, it is possible to implement transitions for when the modal is opened or closed. By placing the following CSS somewhere in your project's styles, you can make the modal …

Minimal This example shows the minimal needed to get React Modal to work. Minimal example

When using React Test Utils with this library, here are some things to keep in mind: You need to set isOpen={true} on the modal component for it to render its children.

This is especially important for handling closing the modal via the escape key. Also more important if shouldCloseOnOverlayClick is set to true, when clicked on overlay it calls …