# @vlzh/react-modal-manager

> Manager for modals in your react application

Latest version **2.0.0-alpha.4** (published 2020-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vlzh/react-modal-manager
pnpm add @vlzh/react-modal-manager
yarn add @vlzh/react-modal-manager
bun add @vlzh/react-modal-manager
```

## Health

**Score 30/100 (F)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-alpha.4 |
| Published | 2020-09-11 |
| First published | 2019-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | vlzh |
| Maintainers | vlzh |
| Keywords | react, modal, manager, popup |

## Links

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

## 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.0-alpha.4 (latest) — 2020-09-11
- 2.0.0-alpha.3 — 2020-09-11
- 2.0.0-alpha.2 — 2020-09-11
- 2.0.0-alpha.1 — 2020-09-11
- 1.0.3 — 2020-06-08
- 1.0.2 — 2020-06-08
- 1.0.1 — 2020-06-05
- 1.0.0 — 2020-06-05
- 0.1.6 — 2020-01-27
- 0.1.5 — 2020-01-17
- 0.1.4 — 2020-01-17
- 0.1.3 — 2020-01-17
- 0.1.2 — 2019-10-03
- 0.1.1 — 2019-10-03
- 0.1.0 — 2019-10-03
- … 4 more at https://npm.io/package/@vlzh/react-modal-manager/versions

## README

# react-modal-manager

Manager for modals in your react application

![npm](https://img.shields.io/npm/dm/@vlzh/react-modal-manager) ![GitHub issues](https://img.shields.io/github/issues-raw/vlzh/react-modal-manager) ![npm bundle size](https://img.shields.io/bundlephobia/min/@vlzh/react-modal-manager)

# Installation

```bash
yarn add @vlzh/react-modal-manager
```

or

```bash
npm add @vlzh/react-modal-manager
```

# API

You can to manipulate with manager through 2 api:

-   `useModalManager(name: string)`
-   `withModalManager(name: string)`

> #### ⚠️ Info
>
> You can to call `useModalManager` and `withModalManager` with providing `name` of modal... but there is one point!
> When you will provide `name` you just subscribe current component to `modalManager` + methods returned from `useModalManager` will be associated with specific modal.

they provide several methods:

-   `closeModal(name: string): void` - close modal with specific name
-   `openModal(name: string): void` - open modal with specific name
-   `isOpen(name: string): boolean` - get opening status for modal with specific name
-   `getParams(name: string): boolean` - get opening status for modal with specific name

# Events

In example bellow you can to see, how to subscribe on event. Supported events:

-   `beforeOpen`
-   `afterOpen`
-   `beforeClose`
-   `afterClose`

Any provided callback function will call with object like:

```
{
    modal_name: string
}
```

# Example

[![Edit react-modal-manager](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/frosty-currying-ytyku?fontsize=14)

```javascript
import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-modal";
import { useModalManager, manager } from "@vlzh/react-modal-manager";

// subscribe on event 'afterOpen'
manager.on("afterOpen", ({ modal_name }) => {
    console.log(`Modal ${modal_name} opened`);
});

Modal.setAppElement("#root");

const OpenModalButton = () => {
    // if we do not define name in useModalManager this button will not be subscribed on changes in manager, but you must to define modal_name on calling of openModal
    const { openModal } = useModalManager();
    return (
        <button type="button" onClick={() => openModal("example_modal")}>
            Open modal
        </button>
    );
};

const App = (props) => {
    const { isOpen, closeModal } = useModalManager("example_modal");
    return (
        <div>
            <OpenModalButton />
            <Modal
                isOpen={isOpen("example_modal")}
                onRequestClose={() => closeModal("example_modal")}
                contentLabel="Example Modal"
            >
                <h2>Hello</h2>
                <button onClick={() => closeModal("example_modal")}>
                    close
                </button>
                <div>I am a modal</div>
                <form>
                    <input />
                    <button>tab navigation</button>
                    <button>stays</button>
                    <button>inside</button>
                    <button>the modal</button>
                </form>
            </Modal>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));
```

# Changelog

-   `2.0.0` - Support of parameters

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