View Source

Modal

A blocking, focus-stealing container.

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 --save boundless-modal

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';

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

maskProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

modalProps
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

portalProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

children
Expects
any renderable
Default Value
null

any normal React child, but must be singular; multiple sibling children must have a common wrapper, such as a "layout" <div>

✅ OK:

<Portal>
  foo
</Portal>

<Portal>
  <div>foo</div>
</Portal>

<Portal>
  <div>
      <div>foo</div>
      <div>bar</div>
  </div>
</Portal>

⛔️ Not OK:

<Portal>
  <div>foo</div>
  <div>bar</div>
</Portal>
destination
Expects
HTMLElement
Default Value
document.body

the location to append the generated portal and child elements

portalId
Expects
string
Default Value
null

the ID used to link the portal origin to the destination; added to generated <div> appended to the destination HTML node