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

(this.subtitle = subtitle)}>Hello

+ +

this.subtitle = subtitle}>Hello

I am a modal
@@ -104,25 +103,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 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)