2.0.2 • Published 3 years ago
react-micro-modal v2.0.2
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/
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.7.3
4 years ago
1.7.2
4 years ago
1.7.1
5 years ago
1.7.0
5 years ago
1.6.0
5 years ago
1.5.1
5 years ago
1.5.0
5 years ago
1.4.4
5 years ago
1.4.3
5 years ago
1.4.2
5 years ago
1.4.1
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.1.0
5 years ago