# react-micro-modal

> React accessible micro modal component

Latest version **2.0.2** (published 2020-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-micro-modal
pnpm add react-micro-modal
yarn add react-micro-modal
bun add react-micro-modal
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2020-12-27 |
| First published | 2019-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10.22.0 |
| Dependencies | 0 |
| Unpacked size | 52.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38 |
| Author | Matej |
| Maintainers | meemaw |
| Keywords | react, micro, modal, component, accessible, frontend |

## Links

- npm: https://www.npmjs.com/package/react-micro-modal
- Repository: https://github.com/Meemaw/react-micro-modal
- Homepage: https://github.com/Meemaw/react-micro-modal#readme
- Issues: https://github.com/Meemaw/react-micro-modal/issues
- npm.io page: https://npm.io/package/react-micro-modal

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2020-12-27
- 2.0.1 — 2020-12-27
- 2.0.0 — 2020-12-27
- 1.7.3 — 2020-02-19
- 1.7.2 — 2020-02-19
- 1.7.1 — 2019-10-13
- 1.7.0 — 2019-10-12
- 1.6.0 — 2019-04-11
- 1.5.1 — 2019-04-08
- 1.5.0 — 2019-04-07
- 1.4.4 — 2019-04-07
- 1.4.3 — 2019-04-07
- 1.4.2 — 2019-04-07
- 1.4.1 — 2019-04-07
- 1.4.0 — 2019-04-06
- … 7 more at https://npm.io/package/react-micro-modal/versions

## README

# react-micro-modal

[![npm](https://img.shields.io/npm/v/react-micro-modal.svg)](https://www.npmjs.com/package/react-micro-modal) [![](https://badgen.net/bundlephobia/minzip/react-micro-modal)](https://bundlephobia.com/result?p=react-micro-modal) ![CI](https://github.com/Meemaw/react-micro-modal/workflows/CI/badge.svg) [![codecov](https://codecov.io/gh/Meemaw/react-micro-modal/branch/master/graph/badge.svg?token=xdrppK2PPf)](https://codecov.io/gh/Meemaw/react-micro-modal) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

_Accessible, lightweight and configurable modal component with a11y-enabled inspired by [Micromodal.js](https://github.com/Ghosh/micromodal)._

### [Release notes](https://github.com/Meemaw/react-micro-modal/releases) | [Documentation](https://github.com/Meemaw/react-micro-modal/tree/master/docs)

---

- 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.

```tsx
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/

---
_Source: https://npm.io/package/react-micro-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._