A simple responsive react modal.
You can find a demo here. Or you can run examples
git clone https://github.com/pradel/react-responsive-modal
cd react-responsive-modal
yarn
yarn run build:examples
open examples/index.html
With npm: npm install react-responsive-modal --save
Or with yarn: yarn add react-responsive-modal
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-responsive-modal';
export default class App extends React.Component {
constructor(props) {
super(props);
this.onOpenModal = this.onOpenModal.bind(this);
this.onCloseModal = this.onCloseModal.bind(this);
this.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} little>
<h2>Simple centered modal</h2>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
open
: (Bool) Required Control if the modal is open or not.
onClose
: (Function) Required Fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
closeOnEsc
: (Bool) default: true is the modal closable when user press esc key.
closeOnOverlayClick
: (Bool) default: true is the modal closable when user click on overlay.
little
: (Bool) Is the dialog centered When you don't have a lot of content.
showCloseIcon
: (Bool) default: true Show the close icon.
closeIconSize
: (Number) default: 28 Close icon size.
children
: (Node) The content of the modal.
overlayClassName
: (String) Classname for overlay div.
modalClassName
: (String) Classname for modal content div.
closeIconClassName
: (String) Classname for close icon svg.
overlayStyle
: (Object) Inline style for overlay div.
modalStyle
: (Object) Inline style for modal content div.