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>