@@ -45,22 +45,23 @@ import ReactDOM from 'react-dom';
45
45
import Modal from ' react-modal' ;
46
46
47
47
const 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
+ },
56
56
};
57
57
58
58
// 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 );
60
64
61
- function App (){
62
- var subtitle;
63
- const [modalIsOpen ,setIsOpen ] = React .useState (false );
64
65
function openModal () {
65
66
setIsOpen (true );
66
67
}
@@ -70,34 +71,33 @@ function App(){
70
71
subtitle .style .color = ' #f00' ;
71
72
}
72
73
73
- function closeModal (){
74
+ function closeModal () {
74
75
setIsOpen (false );
75
76
}
76
77
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
+ );
101
101
}
102
102
103
103
ReactDOM .render (< App / > , appElement);
0 commit comments