From 0b56049e0fc6ac068715daeddf434731349a0c71 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 19 Jul 2019 16:31:06 +0100
Subject: [PATCH] Revert "[chore] cleanup readme"

This reverts commit a428d837199c2258547fc2079d93b3a5a5337331.
---
 README.md | 89 +++++++++++++++++++++++++++----------------------------
 1 file changed, 44 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 715782ea..fd01daa7 100644
--- a/README.md
+++ b/README.md
@@ -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
 
@@ -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() {
@@ -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>
@@ -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)