react-modal

You can implement fade transitions for the modal overlay by using specific CSS classes. To apply a global fade transition to all modals, add the following CSS to your project:

.ReactModal__Overlay {
    opacity: 0;
    transition: opacity 2000ms ease-in-out;
}

.ReactModal__Overlay--after-open {
    opacity: 1;
}

.ReactModal__Overlay--before-close {
    opacity: 0;
}

To apply transitions to a specific modal only, define custom class names in your CSS and pass them to the className prop of the <Modal /> component as an object.

.ReactModal__Overlay {
    opacity: 0;
    transition: opacity 2000ms ease-in-out;
}

.ReactModal__Overlay--after-open{
    opacity: 1;
}

.ReactModal__Overlay--before-close{
    opacity: 0;
}

For React CDN applications, add the following script tag after your React CDN scripts and before your own JavaScript files.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js"
            integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>

You can pass a style object to the Modal component to customize the appearance of the overlay and the content. The styles provided via the style prop are merged with the library's default styles.

Note: If you specify a CSS class for the overlay or the content using the className prop, the default styles for that specific component will be disabled.

<Modal
  ...
  style={{
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.75)'
    },
    content: {
      position: 'absolute',
      top: '40px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      border: '1px solid #ccc',
      background: '#fff',
      overflow: 'auto',
      WebkitOverflowScrolling: 'touch',
      borderRadius: '4px',
      outline: 'none',
      padding: '20px'
    }
  }}
  ...
>

By default, the modal portal is appended to the document's body. To attach the modal to a different parent element, provide a function to the parentSelector prop that returns the desired element.

Important: Ensure your appElement is set correctly. The app element should not be a parent of the modal to prevent the modal content from being hidden from screen readers while open.

<Modal
  // ...
  parentSelector={() => document.querySelector('#root')}>
  <p>Modal Content.</p>
</Modal>

To use react-modal in an application using React via CDN, add the following script tag after your React CDN scripts and before your own JavaScript files. You can then use the <Modal> tag within your app.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js"
            integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>

To install the stable version of react-modal in your project, use either npm or yarn.

$ npm install react-modal
$ yarn add react-modal

To ensure screenreader users do not interact with background content while a modal is open, react-modal uses the aria-hidden attribute on your application's root element. You must call Modal.setAppElement with a CSS selector or a DOM element before any modals are opened.

If you are already managing aria-hidden on your app content manually, you can pass the ariaHideApp={false} prop to the Modal component to suppress warnings.

If you are using React 16, close transitions will only work if you use the isOpen prop to toggle visibility. Do not conditionally render the <Modal /> component itself, as the React 16 Portal API does not allow intervention during the unmounting process, which prevents the close transition from playing.

Incorrect (Conditional Rendering):

{this.state.showModal && <Modal ... />}

Correct (Using isOpen prop):

<Modal
  closeTimeoutMS={200}
  isOpen={this.state.showModal}
  contentLabel="modal"
  onRequestClose={() => this.toggleModal()}
>
  <h2 >Add modal content here</h2>
</Modal>

To ensure the modal is accessible, you must bind the modal to your application's root element using Modal.setAppElement(). This allows screen readers to correctly identify the main content and the modal context.

import Modal from 'react-modal';

// Replace '#yourAppElement' with the ID of your application's root element
Modal.setAppElement('#yourAppElement');

Use the className and overlayClassName props to apply CSS classes to the modal content and the overlay.

Each prop can be:

1. A single string containing the class name.
2. An object with the following keys:
   • base: Always applied.
   • afterOpen: Applied after the modal has been opened.
   • beforeClose: Applied when the modal requests to close (e.g., via Escape key or overlay click).

Important Notes:

• If you use afterOpen or beforeClose for transitions, you must set the closeTimeoutMS prop to a non-zero value (matching your transition length) so the beforeClose class has time to be visible.
• Specifying className or overlayClassName disables the default inline styles for those elements.
• If no classes are provided, react-modal applies default classes using the ReactModal__Overlay and ReactModal__Content prefixes.

To ensure transitions work correctly, you must inform the <Modal /> component of the duration required for the animation using the closeTimeoutMS prop. The value provided to closeTimeoutMS (in milliseconds) must match the duration used in your CSS transition property.

<Modal closeTimeoutMS={2000} />