[fixed] keep references of modals when available.

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react"]
-}
+  "presets": ["react", "latest", "stage-2"]
+}

.codeclimate.yml

@@ -0,0 +1,17 @@
+engines:
+  eslint:
+    enabled: true
+    channel: "eslint-3"
+  duplication:
+    enabled: true
+    config:
+      languages:
+        javascript:
+ratings:
+  paths:
+    - lib/**
+    - "**.js"
+exclude_paths:
+  - "specs/"
+  - "dist/"
+  - "examples/"

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "parser": "babel-eslint",
+  rules: {
+    "comma-dangle": [2, "only-multiline"],
+    "max-len": [1, {"code": 140}],
+    "no-continue": [0],
+    "no-plusplus": [0],
+    "space-before-function-paren": [2, "always"],
+    "import/no-extraneous-dependencies": [2, {"devDependencies": true}],
+    "react/jsx-filename-extension": ["error", {"extensions": [".js"]}]
+  },
+};

.gitignore

@@ -2,3 +2,4 @@ examples/**/*-bundle.js
 node_modules/
 .idea/
 _book
+coverage

.travis.yml

@@ -1,9 +1,15 @@
 language: node_js
 node_js:
   - "7"
-  - "6"
-  - "5"
-  - "4"
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+after_success:
+  - cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+script: npm run test:full
+cache: yarn
+addons:
+  sauce_connect:
+    username: "cd-reactmodal"
+  jwt:
+    secure: PpSLvFVrzYYh5zn4SXSkhDsQ3lRxCa4yOwjbVCy3C3smQxgJLKDCHTBp4OcwDlDfPjSsq4nKaQcsOJa9DlduAxMIW98t6pQelqLD9aaEGDbdzyJ4qx5G3fTs6AdU8WJuvVY145zaRcgUdejs5Ii9j1rMna3yS9HfGRE5r4aHNhE=

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2014 Ryan Florence
+Copyright (c) 2017 Ryan Florence
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -2,6 +2,11 @@
 
 Accessible modal dialog component for React.JS
 
+[![Code Climate](https://codeclimate.com/github/reactjs/react-modal/badges/gpa.svg)](https://codeclimate.com/github/reactjs/react-modal)
+[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
+
+[![Build Status](https://saucelabs.com/browser-matrix/cd-reactmodal.svg)](https://saucelabs.com/beta/builds/ad582339a83145e1a4d3e8b8a1809b6c)
+
 ## Active Development
 The modal is currently undergoing significant development for a v2 release.  The `master` branch contains that development work.
 If you'd like to see the latest stable version please use the release tags (https://github.com/reactjs/react-modal/releases)
@@ -119,9 +124,9 @@ You can use this to remove scrolling on the the body while the modal is open.
 Inside an app:
 
 ```js
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Modal = require('react-modal');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from 'react-modal';
 
 
 /*
@@ -136,7 +141,7 @@ Modal.setAppElement(appElement);
 Modal.setAppElement('#your-app-element');
 
 */
-var appElement = document.getElementById('your-app-element');
+const appElement = document.getElementById('your-app-element');
 
 
 
@@ -152,26 +157,33 @@ const customStyles = {
 };
 
 
-var App = React.createClass({
+class App extends React.Component {
+  constructor() {
+    super();
 
-  getInitialState: function() {
-    return { modalIsOpen: false };
-  },
+    this.state = {
+      modalIsOpen: false
+    };
 
-  openModal: function() {
+    this.openModal = this.openModal.bind(this);
+    this.afterOpenModal = this.afterOpenModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+  }
+
+  openModal() {
     this.setState({modalIsOpen: true});
-  },
+  }
 
-  afterOpenModal: function() {
+  afterOpenModal() {
     // references are now sync'd and can be accessed.
     this.refs.subtitle.style.color = '#f00';
-  },
+  }
 
-  closeModal: function() {
+  closeModal() {
     this.setState({modalIsOpen: false});
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         <button onClick={this.openModal}>Open Modal</button>
@@ -197,9 +209,9 @@ var App = React.createClass({
       </div>
     );
   }
-});
+}
 
-ReactDOM.render(<App/>, appElement);
+ReactDOM.render(<App />, appElement);
 ```
 # Testing
 

examples/basic/app.js

@@ -1,6 +1,6 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Modal = require('../../lib/index');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../../lib/index';
 
 var appElement = document.getElementById('example');
 
@@ -9,25 +9,34 @@ Modal.setAppElement('#example');
 var App = React.createClass({
 
   getInitialState: function() {
-    return { modalIsOpen: false };
+    return { modalIsOpen: false, modal2: false };
   },
 
   openModal: function() {
-    this.setState({modalIsOpen: true});
+    this.setState({ ...this.state, modalIsOpen: true });
   },
 
   closeModal: function() {
-    this.setState({modalIsOpen: false});
+    this.setState({ ...this.state, modalIsOpen: false });
+  },
+
+  openSecondModal: function(event) {
+    event.preventDefault();
+    this.setState({ ...this.state, modal2:true });
+  },
+
+  closeSecondModal: function() {
+    this.setState({ ...this.state, modal2:false });
   },
 
   handleModalCloseRequest: function() {
     // opportunity to validate something and keep the modal open even if it
     // requested to be closed
-    this.setState({modalIsOpen: false});
+    this.setState({ ...this.state, modalIsOpen: false });
   },
 
   handleInputChange: function() {
-    this.setState({foo: 'bar'});
+    this.setState({ foo: 'bar' });
   },
 
   handleOnAfterOpenModal: function() {
@@ -38,9 +47,11 @@ var App = React.createClass({
   render: function() {
     return (
       <div>
-        <button onClick={this.openModal}>Open Modal</button>
+        <button onClick={this.openModal}>Open Modal A</button>
+        <button onClick={this.openSecondModal}>Open Modal B</button>
         <Modal
           ref="mymodal"
+          id="test"
           closeTimeoutMS={150}
           isOpen={this.state.modalIsOpen}
           onAfterOpen={this.handleOnAfterOpenModal}
@@ -59,8 +70,17 @@ var App = React.createClass({
             <button>hi</button>
             <button>hi</button>
             <button>hi</button>
+            <button onClick={this.openSecondModal}>Open Modal B</button>
           </form>
         </Modal>
+        <Modal ref="mymodal2"
+               id="test2"
+               closeTimeoutMS={150}
+               isOpen={this.state.modal2}
+               onAfterOpen={() => {}}
+               onRequestClose={this.closeSecondModal}>
+          <p>test</p>
+        </Modal>
       </div>
     );
   }