View Source

Dialog

A non-blocking, focus-stealing container.

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 attribute, which can be added to props.dialogProps.

Installation#

npm i --save boundless-dialog

Dialog 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 { Dialog } from 'boundless';

Demo

Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

after
Expects
any renderable
Default Value
null

arbitrary content to be rendered after the dialog in the DOM

before
Expects
any renderable
Default Value
null

arbitrary content to be rendered before the dialog in the DOM

captureFocus
Expects
bool
Default Value
true

determines if focus is allowed to move away from the dialog

closeOnEscKey
Expects
bool or function
Default Value
false

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

closeOnInsideClick
Expects
bool or function
Default Value
false

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

closeOnOutsideClick
Expects
bool or function
Default Value
false

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

closeOnOutsideFocus
Expects
bool or function
Default Value
false

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

closeOnOutsideScroll
Expects
bool or function
Default Value
false

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

component
Expects
string
Default Value
'div'

override the type of .b-dialog-wrapper HTML element

dialogComponent
Expects
string
Default Value
'div'

override the type of .b-dialog HTML element

dialogProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

onClose
Expects
function
Default Value
() => {}

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