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" > -