Skip to content

Latest commit

 

History

History
58 lines (40 loc) · 1.91 KB

README.md

File metadata and controls

58 lines (40 loc) · 1.91 KB

react-micro-modal

npm CI codecov code style: prettier

Accessible, lightweight and configurable modal component with a11y-enabled inspired by Micromodal.js.


  • NPM: npm install react-micro-modal
  • Yarn: yarn add react-micro-modal

Features

  • Micro bundle - 1.9 KB 📦
  • a11y friendly 👓
  • Supports nested modals
  • Focuses on the first focusable element within the modal
  • Traps focus inside the modal
  • Closes on document click
  • Closes on Escape keypress
  • Usage as controlled or uncontrolled component

Example

Here is a minimal uncontrolled modal example in 3 lines of code.

import React from 'react';
import { render } from 'react-dom';
import MicroModal from 'react-micro-modal';

const App = () => {
  return (
    <MicroModal trigger={(open) => <div onClick={open}>Open!</div>}>
      {(close) => <button onClick={close}>Close!</button>}
    </MicroModal>
  );
};

render(<App />, document.getElementById('root'));

Live Playground

For more examples of micro-modal in action, go to https://meemaw.github.io/react-micro-modal.

OR

To run that demo on your own computer: