boundless-modal

1.1.0 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i boundless-modal

Weekly Downloads

2

Version

1.1.0

License

MIT

Last publish

Collaborators

  • sighrobot