GithubHelp home page GithubHelp logo

gnoff / react-modal Goto Github PK

View Code? Open in Web Editor NEW

This project forked from reactjs/react-modal

0.0 3.0 0.0 2.16 MB

Accessible modal dialog component for React

Home Page:

License: MIT License

JavaScript 87.92% Makefile 5.14% Shell 1.79% Python 5.15%

react-modal's Introduction


Accessible modal dialog component for React.JS

Build Status Coverage Status gzip size Join the chat at

Table of Contents


To install, you can use npm or yarn:

$ npm install 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.


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 (

class App extends React.Component {
  constructor() {

    this.state = {
      modalIsOpen: false

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);

  openModal() {
    this.setState({modalIsOpen: true});

  afterOpenModal() {
    // references are now sync'd and can be accessed. = '#f00';

  closeModal() {
    this.setState({modalIsOpen: false});

  render() {
    return (
        <button onClick={this.openModal}>Open Modal</button>
          contentLabel="Example Modal"

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
            <input />
            <button>tab navigation</button>
            <button>the modal</button>

ReactDOM.render(<App />, 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.


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

react-modal's People


amccloud avatar bannier avatar claydiffrient avatar conlanpatrek avatar diasbruno avatar dinodsaurus avatar everdimension avatar h4 avatar hdix avatar ianprime0509 avatar ingro avatar jasonblanchard avatar kennykaye avatar kloots avatar kyeotic avatar leoasis avatar maisano avatar mzabriskie avatar oliverjash avatar peterjmag avatar qaisjp avatar robertklep avatar roth1002 avatar ryanflorence avatar rywhee avatar shivashp avatar shunjikonishi avatar silverbber avatar spen avatar tsmirnov avatar


 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.