React Modal

A flexible, unstyled, a11y-enabled library for creating dialogs, drawers, popups, popovers, mega-menus, light-boxes, etc, etc, etc. Modals with fancy names. Meant to power other UI libraries. 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. Quickly control them with ModalToggler or easily create your own.

• 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. No more needing to nest or wrap nodes unnecessarily.

• Router Ready

  Control any modal with the URL. Share direct links, open on load, or use browser navigation. 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