Need help with react-modal?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

reactjs
6.1K Stars 748 Forks MIT License 515 Commits 132 Opened issues

Description

Accessible modal dialog component for React

Services available

!
?

Need anything else?

Contributors list

react-modal

Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size Join the chat at https://gitter.im/react-modal/Lobby

Table of Contents

Installation

To install, you can use npm or yarn:

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

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 (http://reactcommunity.org/react-modal/accessibility/) Modal.setAppElement('#yourAppElement')

function App(){ var 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 (
  <div>
    <button onclick="{openModal}">Open Modal</button>
    <modal isopen="{modalIsOpen}" onafteropen="{afterOpenModal}" onrequestclose="{closeModal}" style="{customStyles}" contentlabel="Example Modal">

      <h2 ref="{_subtitle"> (subtitle = _subtitle)}&gt;Hello</h2>
      <button onclick="{closeModal}">close</button>
      <div>I am a modal</div>
      <form>
        <input>
        <button>tab navigation</button>
        <button>stays</button>
        <button>inside</button>
        <button>the modal</button>
      </form>
    </modal>
  </div>
);

}

ReactDOM.render(, appElement);

You can find more examples in the

examples
directory, which you can run in a local development server using
npm start
or
yarn run start
.

Demos

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.