React Modal

A highly configurable, a11y-enabled library for creating dialogs, drawers, popups, popovers, mega-menus, light-boxes, etc, etc, etc. Modals...with fancy names. This library is agnostic in both structure and style. You decide what it does, how it works, how it looks...and ultimately what its called.

Highlights

• Modular

  Get creative with your setup. Create a modal from anywhere with Modal or asModal. Interact with a modal from anywhere with useModal or withModal — or quickly control them with ModalToggler. Integrate into existing apps, retrofit existing components, and have fun.

• Accessible

  Shipped fully accessible. ModalProvider, asModal, and ModalToggler strictly follow the WAI-ARIA guidelines on modal dialogs. You can also customize anything.

• Contextual

  Leave your content put. Stop lifting state and drilling props, or throwing into Redux. Render ModalContainer anywhere in your app as a descendent of the ModalProvider to have your modal portal into. Also helpful in dealing with CSS stacking contexts.

• Router Ready

  Control any modal with the URL. Share direct links, open on load, or navigate with the back button. Opt-in to use the history API. Using Next.js, Gatsby, or some other framework? Easily use those routers instead.

• Faceless UI

  Applies no visual style, but encourages you to do so. Target any element and any state without additional legwork. BEM classes come shipped. Transition classes too, using react-transition-group. Build literally any modal experience, and start challenging your designers for a change.

• Agnostic DOM

  Take complete control over the DOM. Things like custom markup, accessibility, or additional event handling. Everything beyond core functionality is extendable.

Quick Start

Installation

$ npm i @trbl/react-modal
$ # or
$ yarn add @trbl/react-modal

Composition

  import React from 'react';
  import {
    Modal,
    ModalContainer,
    ModalProvider,
    ModalToggler
  } from '@trbl/react-modal';

  const App = () => (
    <ModalProvider>
      <Modal slug="modal1">
        ...
      </Modal>
      <ModalToggler slug="modal1">
        ...
      </ModalToggler>
      <ModalContainer />
    <ModalProvider>
  );

  export default App;

For working examples, see the demo app.

Demo

$ git clone [email protected]:trouble/react-modal.git
$ yarn
$ yarn dev
$ open http://localhost:3000

API

• asModal
• Modal
• ModalContainer
• ModalProvider
• ModalToggler
• useModal
• withModal

Contribution

Help us, or let us help you help us.

License

MIT Copyright (c) TRBL, LLC