Skip to content

Commit ff23603

Browse files
claydiffrientclaydiffrient
committed
Move documentation site to GitBook
This moves our documentation to being generated using GitBook. Examples are run as embedded CodePen snippets. This isn't ideal, but it works. closes #270 closes #263 closes #258
1 parent 08bf920 commit ff23603

17 files changed

+5416
-2
lines changed

‎README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,4 +224,3 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
224224

225225
# Demos
226226
* http://reactjs.github.io/react-modal/
227-
* http://reactjs.github.io/react-modal/bootstrap

‎book.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"gitbook": ">=3.2.2",
3+
"title": "react-modal",
4+
"root": "./docs",
5+
"plugins": [
6+
"codepen",
7+
"edit-link",
8+
"prism",
9+
"-highlight",
10+
"anchorjs",
11+
"github"
12+
],
13+
"pluginsConfig": {
14+
"codepen": {
15+
"height": 1000,
16+
"defaultTab": "js"
17+
},
18+
"edit-link": {
19+
"base": "https://github.com/reactjs/react-modal/tree/master/docs",
20+
"label": "Edit This Page"
21+
},
22+
"prism": {
23+
"css": [
24+
"prismjs/themes/prism-tomorrow.css"
25+
]
26+
},
27+
"github": {
28+
"url": "https://github.com/reactjs/react-modal"
29+
}
30+
}
31+
}

‎docs/README.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# react-modal
2+
3+
> Accessible modal dialog component for React.JS
4+
5+
We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web. We seek to keep the focus on accessibility while providing a functional, capable modal component for general use.
6+
7+
## General Usage
8+
9+
The following is an example of using react-modal specifying all the possible props and options:
10+
11+
```js
12+
import ReactModal from 'react-modal';
13+
14+
<ReactModal
15+
/*
16+
Boolean describing if the modal should be shown or not.
17+
*/
18+
isOpen={false}
19+
/*
20+
Function that will be run after the modal has opened.
21+
*/
22+
onAfterOpen={handleAfterOpenFunc}
23+
/*
24+
Function that will be run when the modal is requested to be closed, prior to actually closing.
25+
*/
26+
onRequestClose={handleRequestCloseFunc}
27+
/*
28+
Number indicating the milliseconds to wait before closing the modal.
29+
*/
30+
closeTimeoutMS={0}
31+
/*
32+
Object indicating styles to be used for the modal.
33+
It has two keys, `overlay` and `content`. See the `Styles` section for more details.
34+
*/
35+
style={{ overlay: {}, content: {} }}
36+
/*
37+
String indicating how the content container should be announced to screenreaders
38+
*/
39+
contentLabel="Example Modal"
40+
/*
41+
String className to be applied to the portal.
42+
See the `Styles` section for more details.
43+
*/
44+
portalClassName="ReactModalPortal"
45+
/*
46+
String className to be applied to the overlay.
47+
See the `Styles` section for more details.
48+
*/
49+
overlayClassName="ReactModal__Overlay"
50+
/*
51+
String className to be applied to the modal content.
52+
See the `Styles` section for more details.
53+
*/
54+
className="ReactModal__Content"
55+
/*
56+
Boolean indicating if the appElement should be hidden
57+
*/
58+
ariaHideApp={true}
59+
/*
60+
Boolean indicating if the overlay should close the modal
61+
*/
62+
shouldCloseOnOverlayClick={true}
63+
/*
64+
String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
65+
*/
66+
role="dialog"
67+
/*
68+
Function that will be called to get the parent element that the modal will be attached to.
69+
*/
70+
parentSelector={() => document.body}
71+
/>
72+
```
73+
74+
## Install
75+
76+
With [npm](https://npmjs.org/) installed, run
77+
78+
```
79+
$ npm install react-modal
80+
```
81+
82+
83+
## License
84+
85+
MIT

‎docs/SUMMARY.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Summary
2+
3+
* [Read Me](/README.md)
4+
* [Styles](styles/README.md)
5+
* [Using CSS Classes](styles/classes.md)
6+
* [Overriding Defaults](styles/defaults.md)
7+
8+
* [Testing](testing/README.md)
9+
10+
* [Examples](examples/README.md)
11+
* [Minimal](examples/minimal.md)
12+
* [Using setAppElement](examples/set_app_element.md)
13+
* [Using onRequestClose](examples/on_request_close.md)
14+
* [Using shouldCloseOnOverlayClick](examples/should_close_on_overlay_click.md)
15+
* [Using Inline Styles](examples/inline_styles.md)
16+
* [Using CSS Classes](examples/css_classes.md)
17+
* [Using Global Style Overrides](examples/global_overrides.md)
18+
19+
* [Contributing](contributing/README.md)

‎docs/examples/css_classes.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Using CSS Classes for Styling
2+
3+
If you prefer to use CSS to handle styling the modal you can.
4+
5+
One thing to note is that by using the className property you will override all default styles.
6+
7+
[](codepen://claydiffrient/KNjVrG)

‎docs/examples/global_overrides.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Global Overrides
2+
3+
If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying `Modal.defaultStyles`.
4+
5+
[](codepen://claydiffrient/pNXgqQ)

‎docs/examples/inline_styles.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Using Inline Styles
2+
3+
This example shows how to use inline styles to adjust the modal.
4+
5+
[](codepen://claydiffrient/ZBmyKz)

‎docs/examples/minimal.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Minimal
2+
3+
This example shows the minimal needed to get React Modal to work.
4+
5+
[](codepen://claydiffrient/KNxgav)

‎docs/examples/on_request_close.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# onRequestClose Callback
2+
3+
This example shows how you can use the `onRequestClose` prop with a function to perform actions when closing.
4+
5+
This is especially important for handling closing the modal via the escape key.
6+
7+
[](codepen://claydiffrient/KNjVBx)

‎docs/examples/set_app_element.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Using setAppElement
2+
3+
This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open.
4+
5+
You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body.
6+
7+
[](codepen://claydiffrient/ENegGJ)

0 commit comments

Comments
 (0)