react-micro-modal
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

react-micro-modal

npm CI codecov code style: prettier

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

Release notes | Documentation


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

Package Sidebar

Install

npm i react-micro-modal

Weekly Downloads

317

Version

2.0.2

License

MIT

Unpacked Size

53.8 kB

Total Files

20

Last publish

Collaborators

  • meemaw