From a428d837199c2258547fc2079d93b3a5a5337331 Mon Sep 17 00:00:00 2001
From: Griko Nibras <grikomsn@gmail.com>
Date: Fri, 19 Jul 2019 11:05:41 +0700
Subject: [PATCH] [chore] cleanup readme

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

diff --git a/README.md b/README.md
index fd01daa7..715782ea 100644
--- a/README.md
+++ b/README.md
@@ -4,24 +4,26 @@ 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](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
+![gzip size](https://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
 
-* [Installation](#installation)
-* [API documentation](#api-documentation)
-* [Examples](#examples)
-* [Demos](#demos)
+- [Table of Contents](#Table-of-Contents)
+- [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):
-
-
-    $ npm install react-modal
-    $ yarn add react-modal
+To install, you can use [npm](https://npmjs.org/) or [Yarn](https://yarnpkg.com):
 
+```sh
+npm install react-modal
+# or
+yarn add react-modal
+```
 
 ## API documentation
 
@@ -35,48 +37,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() {
@@ -88,10 +90,9 @@ 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>
@@ -103,25 +104,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 run start`.
+local development server using `npm start` or `yarn 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)