react-micro-modal

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:

• Clone this repository
• yarn install
• yarn storybook
• Visit http://localhost:9001/