boundless-modal

Modal

Modal is an enhancement upon Dialog. Typically, a masking layer is provided to obscure the rest of the page in some fashion, while also blocking outside click and keystroke access until the modal is dismissed.

Installation

npm i boundless-modal --save

Then use it like:

/** @jsx createElement */

import { createElement, PureComponent } from 'react';
import Button from 'boundless-button';
import Modal from 'boundless-modal';

export default class ModalDemo extends PureComponent {
    state = {
        showModal: false,
    }

    toggleModal = () => {
        this.setState({ showModal: !this.state.showModal });
    }

    renderModal() {
        if (this.state.showModal) {
            return (
                <Modal className='demo-modal'>
                    <h3>Account Deletion</h3>

                    <p>Are you sure you want to remove your account permanently?</p>

                    <Button onPressed={this.toggleModal}>Yes</Button>
                    <Button className='demo-modal-cancel-button' onPressed={this.toggleModal}>No</Button>
                </Modal>
            );
        }
    }

    render() {
        return (
            <div>
                <Button ref='trigger' onPressed={this.toggleModal}>
                    Delete Account
                </Button>
                {this.renderModal()}
            </div>
        );
    }
}

Modal can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Modal } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

• after · arbitrary content to be rendered after the dialog in the DOM

  Expects	Default Value
  any renderable	null

• before · arbitrary content to be rendered before the dialog in the DOM

  Expects	Default Value
  any renderable	null

• captureFocus · determines if focus is allowed to move away from the dialog

  Expects	Default Value
  bool	true

• closeOnEscKey · enable detection of "Escape" keypresses to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnInsideClick · enable detection of clicks inside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideClick · enable detection of clicks outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideFocus · enable detection of focus outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideScroll · enable detection of scroll and mousewheel events outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• component · override the type of .b-dialog-wrapper HTML element

  Expects	Default Value
  string	'div'

• dialogComponent · override the type of .b-dialog HTML element

  Expects	Default Value
  string	'div'

• dialogProps

  Expects	Default Value
  object	{}

• maskProps

  Expects	Default Value
  object	{}

• modalProps

  Expects	Default Value
  object	{}

• onClose · a custom event handler that is called to indicate that the dialog should be unrendered by its parent; the event occurs if one or more of the "closeOn" props (closeOnEscKey, closeOnOutsideClick, etc.) are passed as true and the dismissal criteria are satisfied

  Expects	Default Value
  function	() => {}

• portalProps

  Expects	Default Value
  object	{}

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue

// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-modal/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.