React-Maxwell-Modal

Install

Usage

Content Modal

Props

import { ContentModal } from 'react-maxwell-modal';
class ContentModalExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 isOpen: false
 }
 this.displayName = 'ContentModalExample';
 this.toggleModal = this.toggleModal.bind(this);
 }
 toggleModal() {
 this.setState({
 isOpen: !this.state.isOpen
 })
 }
 render() {
 return (
 <div className="ClickMeMaxwellModal">
 <button onClick={this.toggleModal}>Load Modal</button>
 <ContentModal
 ref="mymodal"
 isOpen={this.state.isOpen}
 shouldCloseOnOverlayClick={true}
 onHide={this.toggleModal}
 >
 <span>A bunch of useless stuff</span>
 </ContentModal>
 </div>
 );
 }
}

Maxwell Modal

Props

import { MaxwellModal } from 'react-maxwell-modal';
class MaxwellModalExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 isOpen: false
 }
 this.displayName = 'MaxwellModalExample';
 this.toggleModal = this.toggleModal.bind(this);
 }
 toggleModal() {
 this.setState({
 isOpen: !this.state.isOpen
 })
 }
 render() {
 return (
 <div className="ClickMeMaxwellModal">
 <button onClick={this.toggleModal}>Load Modal</button>
 <MaxwellModal
 ref="mymodal"
 isOpen={this.state.isOpen}
 title={"this is a title"}
 shouldCloseOnOverlayClick={true}
 onHide={this.toggleModal}
 >
 <span>A bunch of useless stuff</span>
 </MaxwellModal>
 </div>
 );
 }
}

Confirm Modal

import { ConfirmModal } from 'react-maxwell-modal';
class ConfirmModalExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 isOpen: false
 }
 this.displayName = 'ConfirmModalExample';
 this.toggleModal = this.toggleModal.bind(this);
 this.onYes = this.onYes.bind(this);
 this.onNo = this.onNo.bind(this);
 }
 onYes(closeModal) {
 closeModal(true)
 }
 onNo(closeModal) {
 closeModal(true)
 }
 toggleModal() {
 this.setState({
 isOpen: !this.state.isOpen
 })
 }
 render() {
 return (
 <div className="ClickMeMaxwellModal">
 <button onClick={this.toggleModal}>Load Modal</button>
 <ConfirmModal
 ref="mymodal"
 isOpen={this.state.isOpen}
 shouldCloseOnOverlayClick={true}
 onHide={this.toggleModal}
 onYes={this.onYes}
 onNo={this.onNo}
 >
 <span>A bunch of useless stuff</span>
 </ConfirmModal>
 </div>
 );
 }
}

Alert Modal

Props

import { AlertModal } from 'react-maxwell-modal';
class AlertModalExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 isOpen: false
 }
 this.displayName = 'AlertModalExample';
 this.toggleModal = this.toggleModal.bind(this);
 this.onYes = this.onYes.bind(this);
 }
 onYes(closeModal) {
 closeModal(true)
 }
 toggleModal() {
 this.setState({
 isOpen: !this.state.isOpen
 })
 }
 render() {
 return (
 <div className="ClickMeMaxwellModal">
 <button onClick={this.toggleModal}>Load Modal</button>
 <AlertModal
 ref="mymodal"
 isOpen={this.state.isOpen}
 shouldCloseOnOverlayClick={true}
 onHide={this.toggleModal}
 onYes={this.onYes}
 >
 <span>A bunch of useless stuff</span>
 </AlertModal>
 </div>
 );
 }
}