<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-MODAL/INDEX.JS INSTEAD.
-->
# Modal

Modal is an enhancement upon [Dialog](https://github.com/enigma-io/boundless/blob/master/packages/boundless-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

```bash
npm i boundless-modal --save
```

Then use it like:


```jsx
/** @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](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components:

```bash
npm i boundless --save
```

the ES6 `import` statement then becomes like:

```js
import { Modal } from 'boundless';
```


## Props

> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Modal).

### Required Props

There are no required props.


### Optional Props

- __`*`__ &middot; any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`after`__ &middot; arbitrary content to be rendered after the dialog in the DOM

  Expects | Default Value
  ---     | ---
  `any renderable` | `null`

- __`before`__ &middot; arbitrary content to be rendered before the dialog in the DOM

  Expects | Default Value
  ---     | ---
  `any renderable` | `null`

- __`captureFocus`__ &middot; determines if focus is allowed to move away from the dialog

  Expects | Default Value
  ---     | ---
  `bool` | `true`

- __`closeOnEscKey`__ &middot; 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`__ &middot; 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`__ &middot; 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`__ &middot; 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`__ &middot; 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`__ &middot; override the type of `.b-dialog-wrapper` HTML element

  Expects | Default Value
  ---     | ---
  `string` | `'div'`

- __`dialogComponent`__ &middot; 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`__ &middot; 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).

```stylus
// 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](https://github.com/enigma-io/boundless/blob/master/variables.styl).