@@ -45,22 +45,23 @@ import ReactDOM from 'react-dom';
4545import Modal from ' react-modal' ;
4646
4747const customStyles = {
48- content : {
49- top : ' 50%' ,
50- left : ' 50%' ,
51- right : ' auto' ,
52- bottom : ' auto' ,
53- marginRight : ' -50%' ,
54- transform : ' translate(-50%, -50%)'
55- }
48+ content: {
49+ top: ' 50%' ,
50+ left: ' 50%' ,
51+ right: ' auto' ,
52+ bottom: ' auto' ,
53+ marginRight: ' -50%' ,
54+ transform: ' translate(-50%, -50%)' ,
55+ },
5656};
5757
5858// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
59- Modal .setAppElement (' #yourAppElement' )
59+ Modal .setAppElement (' #yourAppElement' );
60+
61+ function App () {
62+ let subtitle;
63+ const [modalIsOpen , setIsOpen ] = React .useState (false );
6064
61- function App (){
62- var subtitle;
63- const [modalIsOpen ,setIsOpen ] = React .useState (false );
6465 function openModal () {
6566 setIsOpen (true );
6667 }
@@ -70,34 +71,33 @@ function App(){
7071 subtitle .style .color = ' #f00' ;
7172 }
7273
73- function closeModal (){
74+ function closeModal () {
7475 setIsOpen (false );
7576 }
7677
77- return (
78- < div>
79- < button onClick= {openModal}> Open Modal< / button>
80- < Modal
81- isOpen= {modalIsOpen}
82- onAfterOpen= {afterOpenModal}
83- onRequestClose= {closeModal}
84- style= {customStyles}
85- contentLabel= " Example Modal"
86- >
87-
88- < h2 ref= {_subtitle => (subtitle = _subtitle)}> Hello< / h2>
89- < button onClick= {closeModal}> close< / button>
90- < div> I am a modal< / div>
91- < form>
92- < input / >
93- < button> tab navigation< / button>
94- < button> stays< / button>
95- < button> inside< / button>
96- < button> the modal< / button>
97- < / form>
98- < / Modal>
99- < / div>
100- );
78+ return (
79+ < div>
80+ < button onClick= {openModal}> Open Modal< / button>
81+ < Modal
82+ isOpen= {modalIsOpen}
83+ onAfterOpen= {afterOpenModal}
84+ onRequestClose= {closeModal}
85+ style= {customStyles}
86+ contentLabel= " Example Modal"
87+ >
88+ < h2 ref= {(_subtitle ) => (subtitle = _subtitle)}> Hello< / h2>
89+ < button onClick= {closeModal}> close< / button>
90+ < div> I am a modal< / div>
91+ < form>
92+ < input / >
93+ < button> tab navigation< / button>
94+ < button> stays< / button>
95+ < button> inside< / button>
96+ < button> the modal< / button>
97+ < / form>
98+ < / Modal>
99+ < / div>
100+ );
101101}
102102
103103ReactDOM .render (< App / > , appElement);
0 commit comments