https://github.com/pradel/react-responsive-modal

Simple responsive react modal
https://github.com/pradel/react-responsive-modal

modal react responsive

Last synced: 14 days ago
JSON representation

Simple responsive react modal

• Host: GitHub
• URL: https://github.com/pradel/react-responsive-modal
• Owner: pradel
• License: mit
• Created: 2016-04-14T13:19:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-09-18T14:47:02.000Z (about 1 year ago)
• Last Synced: 2024-10-19T05:25:57.414Z (24 days ago)
• Topics: modal, react, responsive
• Language: TypeScript
• Homepage: https://react-responsive-modal.leopradel.com/
• Size: 10.5 MB
• Stars: 607
• Watchers: 8
• Forks: 95
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-responsive-modal

[![npm version](https://img.shields.io/npm/v/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)

[![npm downloads per month](https://img.shields.io/npm/dm/react-responsive-modal.svg)](https://www.npmjs.com/package/react-responsive-modal)

[![codecov](https://img.shields.io/codecov/c/github/pradel/react-responsive-modal/master.svg)](https://codecov.io/gh/pradel/react-responsive-modal)

A simple responsive and accessible react modal.

- Focus trap inside the modal.

- Centered modals.

- Scrolling modals.

- Multiple modals.

- Accessible modals.

- Easily customizable via props.

- Typescript support

- [Small bundle size](https://bundlephobia.com/result?p=react-responsive-modal)

## Documentation

- [Getting started](https://react-responsive-modal.leopradel.com/)

  - [Installation](https://react-responsive-modal.leopradel.com/#installation)

  - [Usage](https://react-responsive-modal.leopradel.com/#usage)

  - [Props](https://react-responsive-modal.leopradel.com/#props)

  - [Licence](https://react-responsive-modal.leopradel.com/#license)

## 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, { useState } from 'react';

import ReactDOM from 'react-dom';

import 'react-responsive-modal/styles.css';

import { Modal } from 'react-responsive-modal';

const App = () => {

  const [open, setOpen] = useState(false);

  const onOpenModal = () => setOpen(true);

  const onCloseModal = () => setOpen(false);

  return (

    


      Open modal

      

        
Simple centered modal

      

    

  );

};


ReactDOM.render(, document.getElementById('app'));

```

## Props

Check the documentation: https://react-responsive-modal.leopradel.com/#props.

## License

MIT © [Léo Pradel](https://www.leopradel.com/)