Fetching contributors…
Cannot retrieve contributors at this time
59 lines (39 sloc) 1.35 KB


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.


Basic example.

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

  This is modal.

Set aria title, description, and close button.

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

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

Track when user intends to close the the modal.

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


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.


<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.