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)

0 comments on commit 0b56049

Please sign in to comment.