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

this.subtitle = subtitle}>Hello

+

(this.subtitle = subtitle)}>Hello

I am a modal
@@ -103,25 +104,25 @@ class App extends React.Component {
- ); + ) } } -ReactDOM.render(, appElement); +ReactDOM.render(, 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)