@@ -144,9 +144,9 @@ You can use this to remove scrolling on the the body while the modal is open.
144
144
Inside an app:
145
145
146
146
``` js
147
- var React = require ( ' react' ) ;
148
- var ReactDOM = require ( ' react-dom' ) ;
149
- var Modal = require ( ' react-modal' ) ;
147
+ import React from ' react' ;
148
+ import ReactDOM from ' react-dom' ;
149
+ import Modal from ' react-modal' ;
150
150
151
151
152
152
/*
@@ -161,7 +161,7 @@ Modal.setAppElement(appElement);
161
161
Modal.setAppElement('#your-app-element');
162
162
163
163
*/
164
- var appElement = document .getElementById (' your-app-element' );
164
+ const appElement = document .getElementById (' your-app-element' );
165
165
166
166
167
167
@@ -177,26 +177,33 @@ const customStyles = {
177
177
};
178
178
179
179
180
- var App = React .createClass ({
180
+ class App extends React .Component {
181
+ constructor () {
182
+ super ();
181
183
182
- getInitialState : function () {
183
- return { modalIsOpen: false };
184
- },
184
+ this .state = {
185
+ modalIsOpen: false
186
+ };
187
+
188
+ this .openModal = this .openModal .bind (this );
189
+ this .afterOpenModal = this .afterOpenModal .bind (this );
190
+ this .closeModal = this .closeModal .bind (this );
191
+ }
185
192
186
- openModal : function () {
193
+ openModal () {
187
194
this .setState ({modalIsOpen: true });
188
- },
195
+ }
189
196
190
- afterOpenModal : function () {
197
+ afterOpenModal () {
191
198
// references are now sync'd and can be accessed.
192
199
this .refs .subtitle .style .color = ' #f00' ;
193
- },
200
+ }
194
201
195
- closeModal : function () {
202
+ closeModal () {
196
203
this .setState ({modalIsOpen: false });
197
- },
204
+ }
198
205
199
- render : function () {
206
+ render () {
200
207
return (
201
208
< div>
202
209
< button onClick= {this .openModal }> Open Modal< / button>
@@ -222,9 +229,9 @@ var App = React.createClass({
222
229
< / div>
223
230
);
224
231
}
225
- });
232
+ }
226
233
227
- ReactDOM .render (< App/ > , appElement);
234
+ ReactDOM .render (< App / > , appElement);
228
235
```
229
236
# Testing
230
237
0 commit comments