# react-responsive-modal-scroll > A simple responsive react modal Latest version **2.0.2** (published 2018-02-16) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-modal-scroll pnpm add react-responsive-modal-scroll yarn add react-responsive-modal-scroll bun add react-responsive-modal-scroll ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2018-02-16 | | First published | 2018-02-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 6 | | Unpacked size | 559.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 612 | | Author | Léo Pradel | | Maintainers | peter.lazzarino | | Keywords | react, responsive, modal, flex | ## Links - npm: https://www.npmjs.com/package/react-responsive-modal-scroll - Repository: https://github.com/pradel/react-responsive-modal - Homepage: https://github.com/pradel/react-responsive-modal#readme - Issues: https://github.com/pradel/react-responsive-modal/issues - npm.io page: https://npm.io/package/react-responsive-modal-scroll ## Dependencies (6) - [no-scroll](https://npm.io/package/no-scroll.md) ^2.1.0 - [react-jss](https://npm.io/package/react-jss.md) ^8.1.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.2.1 - [react-minimalist-portal](https://npm.io/package/react-minimalist-portal.md) ^2.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.2 (latest) — 2018-02-16 - 2.0.1 — 2018-02-16 - 2.0.0 — 2018-02-16 ## README # react-responsive-modal [![npm version](https://badge.fury.io/js/react-responsive-modal.svg)](https://badge.fury.io/js/react-responsive-modal) [![npm](https://img.shields.io/npm/dm/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal) [![Build Status](https://travis-ci.org/pradel/react-responsive-modal.svg?branch=master)](https://travis-ci.org/pradel/react-responsive-modal) [![dependencies Status](https://david-dm.org/pradel/react-responsive-modal/status.svg)](https://david-dm.org/pradel/react-responsive-modal) A simple responsive react modal compatible with React 15 and 16. * Centered modals. * Scrolling modals. * Multiple modals. * Easily customizable via props. ## Demo You can find a demo [here](https://react-responsive-modal.leopradel.com/). ## Examples https://react-responsive-modal.leopradel.com/#example ## Installation With npm: `npm install react-responsive-modal --save` Or with yarn: `yarn add react-responsive-modal` ## Usage [![Edit react-responsive-modal](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9jxp669j2o) ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import Modal from 'react-responsive-modal'; export default class App extends React.Component { state = { open: false, }; onOpenModal = () => { this.setState({ open: true }); }; onCloseModal = () => { this.setState({ open: false }); }; render() { const { open } = this.state; return (

Simple centered modal
); } } ReactDOM.render(, document.getElementById('app')); ``` ### Usage with css By default react-responsive-modal is using [react-jss](https://github.com/cssinjs/react-jss). If you don't want to add it to your project you can use the css version of this project: ```javascript // Import the css file import 'react-responsive-modal/lib/react-responsive-modal.css'; import Modal from 'react-responsive-modal/lib/css'; ``` ## Props | Property | Type | Default | Description | | ------------------- | :------: | :-----: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **open\*** | Boolean | | Control if the modal is open or not. | | **onClose\*** | Function | | Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key. | | children | Node | | The content of the modal. | | closeOnEsc | Boolean | true | Is the modal closable when user press esc key. | | closeOnOverlayClick | Boolean | true | Is the modal closable when user click on overlay. | | little | Boolean | false | Is the dialog centered (**when you don't have a lot of content**). | | showCloseIcon | Boolean | true | Show the close icon. | | closeIconSize | Number | 28 | Close icon size. | | closeIconSvgPath | Node | | A valid svg path to show as icon. | | classNames | Object | {} | An object containing classNames to style the modal, can have properties 'overlay' (classname for overlay div), 'modal' (classname for modal content div), 'closeIcon' (classname for close icon svg). You can customize the transition with 'transitionEnter', 'transitionEnterActive', 'transitionExit', 'transitionExitActive' | | styles | Object | {} | An object containing the styles objects to style the modal, can have properties 'overlay', 'modal', 'closeIcon'. | | animationDuration | Number | 500 | Animation duration in milliseconds. | ## License MIT © [Léo Pradel](https://www.leopradel.com/) --- _Source: https://npm.io/package/react-responsive-modal-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._