Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-responsive-modal with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactResponsiveModal = require("react-responsive-modal")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-responsive-modal v5.1.1

A simple responsive and accessible react modal compatible with React 16 and ready for React 17


npm version npm downloads per month codecov dependencies Status

A simple responsive and accessible react modal compatible with React 16 and ready for React 17.

  • Focus trap inside the modal.
  • Centered modals.
  • Scrolling modals.
  • Multiple modals.
  • Accessible modals.
  • Easily customizable via props.



With npm: npm install react-responsive-modal --save

Or with yarn: yarn add react-responsive-modal


Edit react-responsive-modal

import React from 'react';
import ReactDOM from 'react-dom';
import 'react-responsive-modal/styles.css';
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 (
        <button onClick={this.onOpenModal}>Open modal</button>
        <Modal open={open} onClose={this.onCloseModal} center>
          <h2>Simple centered modal</h2>

ReactDOM.render(<App />, document.getElementById('app'));


Check the documentation:


MIT © Léo Pradel

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free