React Responsive Modal
Edit page
ExamplesGetting startedInstallationUsagePropsLicense

react-responsive-modal

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.

Installation

With npm:

npm install react-responsive-modal --save

Or with yarn:

yarn add react-responsive-modal

Usage

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 (
<div>
<button onClick={this.onOpenModal}>Open modal</button>
<Modal open={open} onClose={this.onCloseModal} center>
<h2>Simple centered modal</h2>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));

Props

open
boolean
required
center
boolean | undefined
closeOnEsc
boolean | undefined
closeOnOverlayClick
boolean | undefined
blockScroll
boolean | undefined
showCloseIcon
boolean | undefined
closeIconId
string | undefined
closeIcon
ReactNode
focusTrapped
boolean | undefined
container
Element | undefined
classNames
{ overlay?: string | undefined; modal?: string | undefined; closeButton?: string | undefined; closeIcon?: string | undefined; animationIn?: string | undefined; animationOut?: string | undefined; } | undefined
styles
{ overlay?: CSSProperties | undefined; modal?: CSSProperties | undefined; closeButton?: CSSProperties | undefined; closeIcon?: CSSProperties | undefined; } | undefined
animationDuration
number | undefined
500
role
string | undefined
dialog
ariaLabelledby
string | undefined
ariaDescribedby
string | undefined
modalId
string | undefined
onClose
() => void
required
onEscKeyDown
((event: KeyboardEvent) => void) | undefined
onOverlayClick
((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined
onAnimationEnd
(() => void) | undefined

License

MIT © Léo Pradel