# Dialog
A dialog differs from a modal in that it does not come with a masking layer (to obscure the rest of the page)
and the user can choose to shift focus away from the dialog contents via mouse click or a keyboard shortcut.
If you decide to provide a header inside your dialog, it's recommended to configure the [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) attribute, which can be added to `props.dialogProps`.
## Installation
```bash
npm i boundless-dialog --save
```
Then use it like:
```jsx
/** @jsx createElement */
import { createElement, PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import Button from 'boundless-button';
import Dialog from 'boundless-dialog';
export default class DialogDemo extends PureComponent {
state = {
showDialog: false,
}
componentDidMount() {
const node = findDOMNode(this.refs.trigger);
this.setState({
leftPosition: node.offsetLeft + node.offsetWidth + 10 + 'px',
topPosition: node.offsetTop + 'px',
});
}
toggleDialog = () => {
this.setState({ showDialog: !this.state.showDialog });
}
renderDialog() {
if (this.state.showDialog) {
return (
);
}
}
render() {
return (
{this.renderDialog()}
);
}
}
```
Dialog 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 { Dialog } from 'boundless';
```
## Props
> Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/Dialog).
### Required Props
There are no required props.
### Optional Props
- __`*`__ · any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)
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` | `{}`
- __`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` | `() => {}`
## 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-dialog/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).