Skip to content

Commit 0b56049

Browse files
committed
Revert "[chore] cleanup readme"
This reverts commit a428d83.
1 parent a428d83 commit 0b56049

File tree

1 file changed

+44
-45
lines changed

1 file changed

+44
-45
lines changed

README.md

Lines changed: 44 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,24 @@ Accessible modal dialog component for React.JS
44

55
[![Build Status](https://travis-ci.org/reactjs/react-modal.svg?branch=v1)](https://travis-ci.org/reactjs/react-modal)
66
[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
7-
![gzip size](https://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
7+
![gzip size](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
88
[![Join the chat at https://gitter.im/react-modal/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-modal/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
99

1010
## Table of Contents
1111

12-
- [Table of Contents](#Table-of-Contents)
13-
- [Installation](#Installation)
14-
- [API documentation](#API-documentation)
15-
- [Examples](#Examples)
16-
- [Demos](#Demos)
12+
* [Installation](#installation)
13+
* [API documentation](#api-documentation)
14+
* [Examples](#examples)
15+
* [Demos](#demos)
1716

1817
## Installation
1918

20-
To install, you can use [npm](https://npmjs.org/) or [Yarn](https://yarnpkg.com):
19+
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
20+
21+
22+
$ npm install react-modal
23+
$ yarn add react-modal
2124

22-
```sh
23-
npm install react-modal
24-
# or
25-
yarn add react-modal
26-
```
2725

2826
## API documentation
2927

@@ -37,48 +35,48 @@ Here is a simple example of react-modal being used in an app with some custom
3735
styles and focusable input elements within the modal content:
3836

3937
```jsx
40-
import React from 'react'
41-
import ReactDOM from 'react-dom'
42-
import Modal from 'react-modal'
38+
import React from 'react';
39+
import ReactDOM from 'react-dom';
40+
import Modal from 'react-modal';
4341

4442
const customStyles = {
45-
content: {
46-
top: '50%',
47-
left: '50%',
48-
right: 'auto',
49-
bottom: 'auto',
50-
marginRight: '-50%',
51-
transform: 'translate(-50%, -50%)',
52-
},
53-
}
43+
content : {
44+
top : '50%',
45+
left : '50%',
46+
right : 'auto',
47+
bottom : 'auto',
48+
marginRight : '-50%',
49+
transform : 'translate(-50%, -50%)'
50+
}
51+
};
5452

5553
// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
5654
Modal.setAppElement('#yourAppElement')
5755

5856
class App extends React.Component {
5957
constructor() {
60-
super()
58+
super();
6159

6260
this.state = {
63-
modalIsOpen: false,
64-
}
61+
modalIsOpen: false
62+
};
6563

66-
this.openModal = this.openModal.bind(this)
67-
this.afterOpenModal = this.afterOpenModal.bind(this)
68-
this.closeModal = this.closeModal.bind(this)
64+
this.openModal = this.openModal.bind(this);
65+
this.afterOpenModal = this.afterOpenModal.bind(this);
66+
this.closeModal = this.closeModal.bind(this);
6967
}
7068

7169
openModal() {
72-
this.setState({ modalIsOpen: true })
70+
this.setState({modalIsOpen: true});
7371
}
7472

7573
afterOpenModal() {
7674
// references are now sync'd and can be accessed.
77-
this.subtitle.style.color = '#f00'
75+
this.subtitle.style.color = '#f00';
7876
}
7977

8078
closeModal() {
81-
this.setState({ modalIsOpen: false })
79+
this.setState({modalIsOpen: false});
8280
}
8381

8482
render() {
@@ -90,9 +88,10 @@ class App extends React.Component {
9088
onAfterOpen={this.afterOpenModal}
9189
onRequestClose={this.closeModal}
9290
style={customStyles}
93-
contentLabel='Example Modal'
91+
contentLabel="Example Modal"
9492
>
95-
<h2 ref={subtitle => (this.subtitle = subtitle)}>Hello</h2>
93+
94+
<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
9695
<button onClick={this.closeModal}>close</button>
9796
<div>I am a modal</div>
9897
<form>
@@ -104,25 +103,25 @@ class App extends React.Component {
104103
</form>
105104
</Modal>
106105
</div>
107-
)
106+
);
108107
}
109108
}
110109

111-
ReactDOM.render(<App />, appElement)
110+
ReactDOM.render(<App />, appElement);
112111
```
113112

114113
You can find more examples in the `examples` directory, which you can run in a
115-
local development server using `npm start` or `yarn start`.
114+
local development server using `npm start` or `yarn run start`.
116115

117116
## Demos
118117

119118
There are several demos hosted on [CodePen](https://codepen.io) which
120119
demonstrate various features of react-modal:
121120

122-
- [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav)
123-
- [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ)
124-
- [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx)
125-
- [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo)
126-
- [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz)
127-
- [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG)
128-
- [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ)
121+
* [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav)
122+
* [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ)
123+
* [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx)
124+
* [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo)
125+
* [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz)
126+
* [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG)
127+
* [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ)

0 commit comments

Comments
 (0)