Modal.md

<Modal>

Creates a modal overlay. This component is similar to <Overlay> but provides the following extras:

• traps tabbing focus inside the overlay.
• makes all other root level elements inert to user input.
• sets aria title and description ids.

Usage

Basic example.

import {Modal} from 'libreact/lib/Modal';

<Modal>
  This is modal.
</Modal>

Set aria title, description, and close button.

<Modal>{({idTitle, idDescription, close}) =>
  <div>
    <h1 id={idTitle}>My title</h1>
    <p id={idDescription}>This is description.</p>

    <button onClick={close}>Cancel</button>
  </div>
}</Modal>

Track when user intends to close the the modal.

<Modal onClick={} onEsc={}>
  This is modal.
</Modal>

Props

Accepts all <Overlay> props in addition to:

• dontLockFocus — optional, boolean, does not jail tabbing focus if true, defaults to false.
• onEsc — optional, callback, called when user presses Esc button.
• onClose — optional, callback, called when close() is executed.

State

<Modal> is a render prop that injects its state into the render function. State has the following keys.

• close() — method to calle onClose event.
• idTitle — id to set for aria title element.
• idDescription — id to set for aria description element.

Root nodes with data-modal-ignore attribute will not be dirty mutated (to create blur effect).