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

Diff for: ‎README.md

-1
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

Diff for: ‎book.json

+31
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+
}

Diff for: ‎docs/README.md

+85
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

Diff for: ‎docs/SUMMARY.md

+19
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)

Diff for: ‎docs/examples/css_classes.md

+7
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)

Diff for: ‎docs/examples/global_overrides.md

+5
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)

Diff for: ‎docs/examples/inline_styles.md

+5
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)

Diff for: ‎docs/examples/minimal.md

+5
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)

Diff for: ‎docs/examples/on_request_close.md

+7
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)

Diff for: ‎docs/examples/set_app_element.md

+7
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)

Diff for: ‎docs/examples/should_close_on_overlay_click.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Using shouldCloseOnOverlayClick
2+
3+
This example shows using `shouldCloseOnOverlayClick` set to `false` so that closing by clicking on the overlay doesn't work.
4+
5+
[](codepen://claydiffrient/woLzwo)

Diff for: ‎docs/styles/README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
## Styles
2+
3+
Styles passed into the Modal via the `style` prop are merged with the defaults. The default styles are:
4+
5+
```js
6+
{
7+
overlay : {
8+
position : 'fixed',
9+
top : 0,
10+
left : 0,
11+
right : 0,
12+
bottom : 0,
13+
backgroundColor : 'rgba(255, 255, 255, 0.75)'
14+
},
15+
content : {
16+
position : 'absolute',
17+
top : '40px',
18+
left : '40px',
19+
right : '40px',
20+
bottom : '40px',
21+
border : '1px solid #ccc',
22+
background : '#fff',
23+
overflow : 'auto',
24+
WebkitOverflowScrolling : 'touch',
25+
borderRadius : '4px',
26+
outline : 'none',
27+
padding : '20px'
28+
}
29+
}
30+
```

Diff for: ‎docs/styles/classes.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
### CSS Classes
2+
3+
Sometimes it may be preferable to use CSS classes rather than inline styles. You can use the `className` and `overlayClassName` props to specify a given CSS class for each of those.
4+
Note: If you provide those props all default styles will not be applied, leaving all styles under control of the CSS class.
5+
The `portalClassName` can also be used however there are no styles by default applied

Diff for: ‎docs/styles/defaults.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### Global Overrides
2+
3+
If you'd like to override all instances of modals you can make changes to `Modal.defaultStyles`.

Diff for: ‎docs/testing/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Testing
2+
3+
When using React Test Utils with this library, here are some things to keep in mind:
4+
5+
- You need to set `isOpen={true}` on the modal component for it to render its children.
6+
- 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.

Diff for: ‎package.json

+11-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,14 @@
1414
},
1515
"scripts": {
1616
"test": "scripts/test --browsers Firefox",
17-
"start": "scripts/dev-examples"
17+
"start": "scripts/dev-examples",
18+
"docs": "npm-run-all docs:*",
19+
"docs-dev": "npm-run-all docs:clean docs:prepare docs:build:watch",
20+
"docs:clean": "rimraf _book",
21+
"docs:prepare": "gitbook install",
22+
"docs:build": "gitbook build -g reactjs/react-modal",
23+
"docs:build:watch": "gitbook serve",
24+
"docs:publish": "cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [email protected]:reactjs/react-modal gh-pages --force"
1825
},
1926
"authors": [
2027
"Ryan Florence"
@@ -27,6 +34,7 @@
2734
"babel-preset-react": "^6.5.0",
2835
"envify": "^3.4.1",
2936
"expect": "1.10.0",
37+
"gitbook-cli": "^2.3.0",
3038
"karma": "^0.13.22",
3139
"karma-browserify": "^4.2.1",
3240
"karma-chrome-launcher": "0.2.0",
@@ -35,10 +43,12 @@
3543
"karma-mocha": "0.2.0",
3644
"karma-safari-launcher": "^0.1.1",
3745
"mocha": "2.3.3",
46+
"npm-run-all": "^3.1.2",
3847
"react": "^15.0.0",
3948
"react-addons-test-utils": "^15.0.0",
4049
"react-dom": "^15.0.0",
4150
"rf-release": "0.4.0",
51+
"rimraf": "^2.5.4",
4252
"sinon": "^1.17.3",
4353
"uglify-js": "2.4.24",
4454
"webpack": "^1.12.14",

0 commit comments

Comments
 (0)