1import React from 'react';
2import ReactDOM from 'react-dom';
3import Modal from 'react-modal';
4
5const customStyles = {
6  content : {
7    top                   : '50%',
8    left                  : '50%',
9    right                 : 'auto',
10    bottom                : 'auto',
11    marginRight           : '-50%',
12    transform             : 'translate(-50%, -50%)'
13  }
14};
15
16// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
17Modal.setAppElement('#yourAppElement')
18
19function App(){
20  var subtitle;
21  const [modalIsOpen,setIsOpen] = React.useState(false);
22  function openModal() {
23    setIsOpen(true);
24  }
25
26  function afterOpenModal() {
27    // references are now sync'd and can be accessed.
28    subtitle.style.color = '#f00';
29  }
30
31  function closeModal(){
32    setIsOpen(false);
33  }
34
35    return (
36      <div>
37        <button onClick={openModal}>Open Modal</button>
38        <Modal
39          isOpen={modalIsOpen}
40          onAfterOpen={afterOpenModal}
41          onRequestClose={closeModal}
42          style={customStyles}
43          contentLabel="Example Modal"
44        >
45
46          <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
47          <button onClick={closeModal}>close</button>
48          <div>I am a modal</div>
49          <form>
50            <input />
51            <button>tab navigation</button>
52            <button>stays</button>
53            <button>inside</button>
54            <button>the modal</button>
55          </form>
56        </Modal>
57      </div>
58    );
59}
60
61ReactDOM.render(<App />, appElement);