Skip to content

Commit

Permalink
Revert "[chore] cleanup readme"
Browse files Browse the repository at this point in the history
This reverts commit a428d83.
  • Loading branch information
gaearon committed Jul 19, 2019
1 parent a428d83 commit 0b56049
Showing 1 changed file with 44 additions and 45 deletions.
89 changes: 44 additions & 45 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,24 @@ Accessible modal dialog component for React.JS

[![Build Status](https://travis-ci.org/reactjs/react-modal.svg?branch=v1)](https://travis-ci.org/reactjs/react-modal)
[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
![gzip size](https://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
![gzip size](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
[![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)

## Table of Contents

- [Table of Contents](#Table-of-Contents)
- [Installation](#Installation)
- [API documentation](#API-documentation)
- [Examples](#Examples)
- [Demos](#Demos)
* [Installation](#installation)
* [API documentation](#api-documentation)
* [Examples](#examples)
* [Demos](#demos)

## Installation

To install, you can use [npm](https://npmjs.org/) or [Yarn](https://yarnpkg.com):
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):


$ npm install react-modal
$ yarn add react-modal

```sh
npm install react-modal
# or
yarn add react-modal
```

## API documentation

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

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from 'react-modal'
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
}
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};

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

class App extends React.Component {
constructor() {
super()
super();

this.state = {
modalIsOpen: false,
}
modalIsOpen: false
};

this.openModal = this.openModal.bind(this)
this.afterOpenModal = this.afterOpenModal.bind(this)
this.closeModal = this.closeModal.bind(this)
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}

openModal() {
this.setState({ modalIsOpen: true })
this.setState({modalIsOpen: true});
}

afterOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00'
this.subtitle.style.color = '#f00';
}

closeModal() {
this.setState({ modalIsOpen: false })
this.setState({modalIsOpen: false});
}

render() {
Expand All @@ -90,9 +88,10 @@ class App extends React.Component {
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel='Example Modal'
contentLabel="Example Modal"
>
<h2 ref={subtitle => (this.subtitle = subtitle)}>Hello</h2>

<h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
Expand All @@ -104,25 +103,25 @@ class App extends React.Component {
</form>
</Modal>
</div>
)
);
}
}

ReactDOM.render(<App />, appElement)
ReactDOM.render(<App />, appElement);
```

You can find more examples in the `examples` directory, which you can run in a
local development server using `npm start` or `yarn start`.
local development server using `npm start` or `yarn run start`.

## Demos

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

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

1 comment on commit 0b56049

@gaearon
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've reverted this commit. If you're not maintaining this repository, please send pull requests instead of direct commits. We've since locked down the permissions so this shouldn't happen again.

Please sign in to comment.