You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+18-218
Original file line number
Diff line number
Diff line change
@@ -25,201 +25,16 @@ To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com)
25
25
$ yarn add react-modal
26
26
27
27
28
-
## Usage
28
+
## API documentation
29
29
30
-
The Modal object has one required prop:
31
-
32
-
-`isOpen` to render its children.
33
-
34
-
Example:
35
-
36
-
```jsx
37
-
<Modal
38
-
isOpen={bool}
39
-
onAfterOpen={afterOpenFn}
40
-
onRequestClose={requestCloseFn}
41
-
closeTimeoutMS={n}
42
-
style={customStyle}
43
-
contentLabel="Modal"
44
-
>
45
-
<h1>Modal Content</h1>
46
-
<p>Etc.</p>
47
-
</Modal>
48
-
```
49
-
50
-
> Use the prop `contentLabel` which adds `aria-label` to the modal if there is no label text visible on the screen, otherwise specify the element including the label text using `aria-labelledby`
51
-
52
-
### App Element
53
-
54
-
The app element allows you to specify the portion
55
-
of your app that should be hidden (via aria-hidden)
56
-
to prevent assistive technologies such as screenreaders
57
-
from reading content outside of the content of
58
-
your modal.
59
-
60
-
If you are doing server-side rendering, you should use
61
-
this property.
62
-
63
-
It can be specified in the following ways:
64
-
65
-
- DOMElement
66
-
67
-
```js
68
-
Modal.setAppElement(appElement);
69
-
```
70
-
71
-
- query selector - uses the first element found if you pass in a class.
72
-
73
-
```js
74
-
Modal.setAppElement('#your-app-element');
75
-
```
76
-
77
-
### Additional Aria Attributes
78
-
79
-
Use the property `aria` to pass any additional aria attributes. It accepts
80
-
an object where the keys are the names of the attributes without the prefix
81
-
`aria-`.
82
-
83
-
Example:
84
-
85
-
```jsx
86
-
<Modal
87
-
isOpen={modalIsOpen}
88
-
aria={{
89
-
labelledby:"heading",
90
-
describedby:"full_description"
91
-
}}>
92
-
<h1 id="heading">H1</h1>
93
-
<div id="full_description">
94
-
<p>Description goes here.</p>
95
-
</div>
96
-
</Modal>
97
-
```
98
-
99
-
## Styles
100
-
101
-
Styles are passed with the `style` prop, an object with 2 keys, 'overlay' and 'content' like so
102
-
103
-
```jsx
104
-
<Modal
105
-
...
106
-
style={{
107
-
overlay: {
108
-
position:'fixed',
109
-
top:0,
110
-
left:0,
111
-
right:0,
112
-
bottom:0,
113
-
backgroundColor:'rgba(255, 255, 255, 0.75)'
114
-
},
115
-
content: {
116
-
position:'absolute',
117
-
top:'40px',
118
-
left:'40px',
119
-
right:'40px',
120
-
bottom:'40px',
121
-
border:'1px solid #ccc',
122
-
background:'#fff',
123
-
overflow:'auto',
124
-
WebkitOverflowScrolling:'touch',
125
-
borderRadius:'4px',
126
-
outline:'none',
127
-
padding:'20px'
128
-
}
129
-
}}
130
-
...
131
-
>
132
-
```
133
-
134
-
Styles passed to the modal are merged in with the above defaults and applied to their respective elements.
135
-
At this time, media queries will need to be handled by the consumer.
136
-
137
-
### Using CSS Classes
138
-
139
-
If you prefer not to use inline styles or are unable to do so in your project,
140
-
you can pass `className` and `overlayClassName` props to the Modal. If you do
141
-
this then none of the default styles will apply and you will have full control
142
-
over styling via CSS.
143
-
144
-
If you want to override default content and overlay classes you can pass object
145
-
with three required properties: `base`, `afterOpen`, `beforeClose`.
146
-
147
-
```jsx
148
-
<Modal
149
-
...
150
-
className={{
151
-
base:'myClass',
152
-
afterOpen:'myClass_after-open',
153
-
beforeClose:'myClass_before-close'
154
-
}}
155
-
overlayClassName={{
156
-
base:'myOverlayClass',
157
-
afterOpen:'myOverlayClass_after-open',
158
-
beforeClose:'myOverlayClass_before-close'
159
-
}}
160
-
...
161
-
>
162
-
```
163
-
164
-
You can also pass a `portalClassName` to change the wrapper's class (*ReactModalPortal*).
165
-
This doesn't affect styling as no styles are applied to this element by default.
166
-
167
-
### Overriding styles globally
168
-
169
-
The default styles above are available on `Modal.defaultStyles`. Changes to this
170
-
object will apply to all instances of the modal.
171
-
172
-
### Appended to custom node
173
-
174
-
You can choose an element for the modal to be appended to, rather than using
175
-
body tag. To do this, provide a function to `parentSelector` prop that return
176
-
the element to be used.
177
-
178
-
```jsx
179
-
180
-
functiongetParent() {
181
-
returndocument.querySelector('#root');
182
-
}
183
-
184
-
<Modal
185
-
...
186
-
parentSelector={getParent}
187
-
...
188
-
>
189
-
<p>Modal Content.</p>
190
-
</Modal>
191
-
```
192
-
193
-
### Body class
194
-
195
-
When the modal is opened a `ReactModal__Body--open` class is added to the `body` tag.
196
-
You can use this to remove scrolling on the body while the modal is open.
197
-
198
-
```CSS
199
-
/* Remove scroll on the body when react-modal is open */
200
-
.ReactModal__Body--open {
201
-
overflow: hidden;
202
-
}
203
-
```
204
-
205
-
### Refs
206
-
207
-
You can use ref callbacks to get overlay and content DOM nodes:
208
-
209
-
```jsx
210
-
<Modal
211
-
...
212
-
overlayRef={node=>this.overlayRef= node}
213
-
contentRef={node=>this.contentRef= node}
214
-
...
215
-
>
216
-
<p>Modal Content.</p>
217
-
</Modal>
218
-
```
30
+
The primary documentation for react-modal is the
31
+
[reference book](https://reactjs.github.io/react-modal), which describes the API
32
+
and gives examples of its usage.
219
33
220
34
## Examples
221
35
222
-
Inside an app:
36
+
Here is a simple example of react-modal being used in an app with some custom
37
+
styles and focusable input elements within the modal content:
223
38
224
39
```jsx
225
40
importReactfrom'react';
@@ -294,33 +109,18 @@ class App extends React.Component {
294
109
ReactDOM.render(<App />, appElement);
295
110
```
296
111
297
-
## Testing
298
-
299
-
When using React Test Utils with this library, here are some things to keep in mind:
300
-
301
-
- You need to set `isOpen={true}` on the modal component for it to render its children.
302
-
- You need to use the `.portal` property, as in `ReactDOM.findDOMNode(renderedModal.portal)` or `TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class')` to acquire a handle to the inner contents of your modal.
303
-
304
-
By default the modal is closed when clicking outside of it (the overlay area). If you want to prevent this behavior you can
305
-
pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
306
-
307
-
```jsx
308
-
<Modal
309
-
isOpen={bool}
310
-
onAfterOpen={afterOpenFn}
311
-
onRequestClose={requestCloseFn}
312
-
closeTimeoutMS={n}
313
-
shouldCloseOnOverlayClick={false}
314
-
style={customStyle}
315
-
contentLabel="No Overlay Click Modal"
316
-
>
317
-
318
-
<h1>Force Modal</h1>
319
-
<p>Modal cannot be closed when clicking the overlay area</p>
0 commit comments