React-Maxwell-Modal

React-Maxwell-Modal Github Page

Install

npm install react-maxwell-modal --save

Usage

There are four types of modals available

Content Modal

Props

|Prop|Type| Required| |-----|----|--------| |onShow|function| false| |onHide|function| true| |isOpen|bool| false| |shouldCloseOnOverlayClick|bool| false|

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

|Prop|Type| Required| |-----|----|--------| |footer|ReactComponent/String| false| |onShow|function| false| |onHide|function| true| |title|string| false| |isOpen|bool| false| |dismissable|bool| false| |shouldCloseOnOverlayClick|bool| false|

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

A replacement for the confirm box. This produces a modal with two buttons, yes and no. Their labels are configurable, as well as what occurs on yes and no.

####Props

|Prop|Type| Required| |-----|----|--------| |onYes|function| false| |onNo|function| false| |yesLabel|string| false| |noLabel|string| false| |onShow|function| false| |onHide|function| true| |title|string| false| |isOpen|bool| false| |dismissable|bool| false| |shouldCloseOnOverlayClick|bool| false|

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

A replacement for the alert box

Props

|Prop|Type| Required| |-----|----|--------| |onYes|function| false| |yesLabel|string| false| |onShow|function| false| |onHide|function| true| |title|string| false| |isOpen|bool| false| |dismissable|bool| false| |shouldCloseOnOverlayClick|bool| false|

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>
      );
  }
}