react-modal

by reactjs

reactjs / react-modal

Accessible modal dialog component for React

5.8K Stars 723 Forks Last release: Not found MIT License 508 Commits 106 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.