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...they do the same thing. Interact with a modal from anywhere with useModal or withModal...they do the same thing, too. Quickly control them with ModalToggler or easily create your own. Integrate into existing apps, retrofit existing components, doesn't matter...there's a setup for that.

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

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

• 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. Each modal will ultimately render here, no matter where they're written. Also helpful in dealing with CSS stacking contexts.

• Accessible

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

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 git@github.com: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