@rapatel-mm/modal v0.0.2
Modify By Multimatic
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 @rapatel-mm/modal
$ # or
$ yarn add @rapatel-mm/modal
Composition
import React from 'react';
import {
Modal,
ModalContainer,
ModalProvider,
ModalToggler
} from '@rapatel-mm/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:Multimatic-IT/modal.git
$ yarn
$ yarn dev
$ open http://localhost:3000
API
Contribution
Help us, or let us help you help us.
License
MIT Copyright (c) TRBL, LLC