react-modal

NOTE

Need feedback to push a new version of

react-modal

Accessible modal dialog component for React.JS

Table of Contents

• Installation
• API documentation
• Examples
• Demos

Installation

To install, you can use npm or yarn:

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

To install react-modal in React CDN app:

• Add this CDN script tag after React CDN scripts and before your JS files (for example from cdnjs):

• Use

  tag inside your React CDN app.

API documentation

The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.

Examples

Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    transform: 'translate(-50%, -50%)',
  },
};
// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');
function App() {
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }
  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }
  function closeModal() {
    setIsOpen(false);
  }
  return (
    

      Open Modal
      
        
 (subtitle = _subtitle)}>Hello
        close
        
I am a modal
        
          
          tab navigation
          stays
          inside
          the modal
        
      
    
  );
}

ReactDOM.render(, appElement);

You can find more examples in the

examples

npm start

yarn run start

Demos

There are several demos hosted on CodePen which demonstrate various features of react-modal:

• Minimal example
• Using setAppElement
• Using onRequestClose
• Using shouldCloseOnOverlayClick
• Using inline styles
• Using CSS classes for styling
• Customizing the default styles