@@ -8,8 +8,8 @@ Accessible modal dialog component for React.JS
88![ gzip size] ( http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip )
99
1010## 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 ` .
1313
1414### Installation
1515
@@ -43,7 +43,9 @@ Example:
4343```
4444
4545## Styles
46+
4647Styles are passed as an object with 2 keys, 'overlay' and 'content' like so
48+
4749``` js
4850{
4951 overlay : {
@@ -106,10 +108,12 @@ You can also pass a `portalClassName` to change the wrapper's class (*ReactModal
106108This doesn't affect styling as no styles are applied to this element by default.
107109
108110### Overriding styles globally
111+
109112The default styles above are available on ` Modal.defaultStyles ` . Changes to this
110113object will apply to all instances of the modal.
111114
112115### Appended to custom node
116+
113117You can choose an element for the modal to be appended to, rather than using
114118body tag. To do this, provide a function to ` parentSelector ` prop that return
115119the element to be used.
@@ -130,6 +134,7 @@ function getParent() {
130134```
131135
132136### Body class
137+
133138When the modal is opened a ` ReactModal__Body--open ` class is added to the ` body ` tag.
134139You can use this to remove scrolling on the the body while the modal is open.
135140
@@ -141,6 +146,7 @@ You can use this to remove scrolling on the the body while the modal is open.
141146```
142147
143148## Examples
149+
144150Inside an app:
145151
146152``` js
@@ -163,8 +169,6 @@ Modal.setAppElement('#your-app-element');
163169*/
164170const appElement = document .getElementById (' your-app-element' );
165171
166-
167-
168172const customStyles = {
169173 content : {
170174 top : ' 50%' ,
@@ -176,7 +180,6 @@ const customStyles = {
176180 }
177181};
178182
179-
180183class App extends React .Component {
181184 constructor () {
182185 super ();
@@ -233,6 +236,7 @@ class App extends React.Component {
233236
234237ReactDOM .render (< App / > , appElement);
235238```
239+
236240# Testing
237241
238242When 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.
259263```
260264
261265# Demos
266+
262267* http://reactjs.github.io/react-modal/
0 commit comments