@@ -8,8 +8,8 @@ Accessible modal dialog component for React.JS
8
8
![ gzip size] ( http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip )
9
9
10
10
## Active Development
11
- ` v2.0.0 ` was released. If you have an old clone of ` react-modal ` for development, don't forget to update.
12
- If you want to create a PR, please target the ` v1 ` branch (It will be the master for now, until all commit are moved from ` master > v1 ` .
11
+
12
+ ` react-modal ` repository is now updated. New PRs can target the ` master ` .
13
13
14
14
### Installation
15
15
@@ -43,7 +43,9 @@ Example:
43
43
```
44
44
45
45
## Styles
46
+
46
47
Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
48
+
47
49
``` js
48
50
{
49
51
overlay : {
@@ -106,10 +108,12 @@ You can also pass a `portalClassName` to change the wrapper's class (*ReactModal
106
108
This doesn't affect styling as no styles are applied to this element by default.
107
109
108
110
### Overriding styles globally
111
+
109
112
The default styles above are available on ` Modal.defaultStyles ` . Changes to this
110
113
object will apply to all instances of the modal.
111
114
112
115
### Appended to custom node
116
+
113
117
You can choose an element for the modal to be appended to, rather than using
114
118
body tag. To do this, provide a function to ` parentSelector ` prop that return
115
119
the element to be used.
@@ -130,6 +134,7 @@ function getParent() {
130
134
```
131
135
132
136
### Body class
137
+
133
138
When the modal is opened a ` ReactModal__Body--open ` class is added to the ` body ` tag.
134
139
You can use this to remove scrolling on the the body while the modal is open.
135
140
@@ -141,6 +146,7 @@ You can use this to remove scrolling on the the body while the modal is open.
141
146
```
142
147
143
148
## Examples
149
+
144
150
Inside an app:
145
151
146
152
``` js
@@ -163,8 +169,6 @@ Modal.setAppElement('#your-app-element');
163
169
*/
164
170
const appElement = document .getElementById (' your-app-element' );
165
171
166
-
167
-
168
172
const customStyles = {
169
173
content : {
170
174
top : ' 50%' ,
@@ -176,7 +180,6 @@ const customStyles = {
176
180
}
177
181
};
178
182
179
-
180
183
class App extends React .Component {
181
184
constructor () {
182
185
super ();
@@ -233,6 +236,7 @@ class App extends React.Component {
233
236
234
237
ReactDOM .render (< App / > , appElement);
235
238
```
239
+
236
240
# Testing
237
241
238
242
When using React Test Utils with this library, here are some things to keep in mind:
@@ -259,4 +263,5 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
259
263
```
260
264
261
265
# Demos
266
+
262
267
* http://reactjs.github.io/react-modal/
0 commit comments