Skip to content
React Powered version of Maxwell Modal
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.DS_Store
.babelrc
.coveralls.yml
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package.json
setup-test-env.js
types.d.ts
webpack.config.base.js
webpack.config.development.js
webpack.config.production.js

README.md

React-Maxwell-Modal

Build Status

Coverage Status

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>
      );
  }
}
You can’t perform that action at this time.