boundless-modal
v1.1.0
Published
A blocking, focus-stealing container.
Downloads
21
Readme
THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.
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.
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
<tr>
<td>after</td>
<td><pre><code>any renderable</code></pre></td>
<td><pre><code class="language-js">null</code></pre></td>
<td>arbitrary content to be rendered after the dialog in the DOM</td>
</tr>
<tr>
<td>before</td>
<td><pre><code>any renderable</code></pre></td>
<td><pre><code class="language-js">null</code></pre></td>
<td>arbitrary content to be rendered before the dialog in the DOM</td>
</tr>
<tr>
<td>bodyProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-dialog-body` node</td>
</tr>
<tr>
<td>captureFocus</td>
<td><pre><code>bool</code></pre></td>
<td><pre><code class="language-js">true</code></pre></td>
<td>determines if focus is allowed to move away from the dialog</td>
</tr>
<tr>
<td>children</td>
<td><pre><code>any renderable</code></pre></td>
<td><pre><code class="language-js">null</code></pre></td>
<td></td>
</tr>
<tr>
<td>closeOnEscKey</td>
<td><pre><code>bool or function</code></pre></td>
<td><pre><code class="language-js">false</code></pre></td>
<td>enable detection of "Escape" keypresses to trigger `props.onClose`; if a function is provided, the return
value determines if the dialog will be closed
<tr>
<td>closeOnInsideClick</td>
<td><pre><code>bool or function</code></pre></td>
<td><pre><code class="language-js">false</code></pre></td>
<td>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
<tr>
<td>closeOnOutsideClick</td>
<td><pre><code>bool or function</code></pre></td>
<td><pre><code class="language-js">false</code></pre></td>
<td>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
<tr>
<td>closeOnOutsideFocus</td>
<td><pre><code>bool or function</code></pre></td>
<td><pre><code class="language-js">false</code></pre></td>
<td>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
<tr>
<td>closeOnOutsideScroll</td>
<td><pre><code>bool or function</code></pre></td>
<td><pre><code class="language-js">false</code></pre></td>
<td>enable detection of scroll and mousewheel events outside the dialog area to trigger `props.onClose`; if a functio
is provided, the return value determines if the dialog will be closed
<tr>
<td>footer</td>
<td><pre><code>any renderable</code></pre></td>
<td><pre><code class="language-js">null</code></pre></td>
<td>text, ReactElements, etc. comprising the "footer" area of the dialog, e.g. confirm/cancel buttons</td>
</tr>
<tr>
<td>footerProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-dialog-footer` node</td>
</tr>
<tr>
<td>header</td>
<td><pre><code>any renderable</code></pre></td>
<td><pre><code class="language-js">null</code></pre></td>
<td>text, ReactElements, etc. to represent the "title bar" area of the dialog</td>
</tr>
<tr>
<td>headerProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-dialog-header` node</td>
</tr>
<tr>
<td>maskProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-modal-mask` HTML element</td>
</tr>
<tr>
<td>modalProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-modal` HTML element</td>
</tr>
<tr>
<td>onClose</td>
<td><pre><code>function</code></pre></td>
<td><pre><code class="language-js">noop</code></pre></td>
<td>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</td>
</tr>
<tr>
<td>portalProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any/all supported [Portal props](https://github.com/bibliotech/uikit/blob/master/packages/boundless-portal/README.md#props)</td>
</tr>
<tr>
<td>wrapperProps</td>
<td><pre><code>object</code></pre></td>
<td><pre><code class="language-js">{}</code></pre></td>
<td>any [React-supported attribute](https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes); applied to the `.b-dialog-wrapper` node</td>
</tr>