# react-modal-vision

> react modal priority manage

Latest version **1.0.14** (published 2023-05-31) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.0.14 |
| Published | 2023-05-31 |
| First published | 2023-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 0 |
| Unpacked size | 60 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | coder |
| Maintainers | wanqingying |
| Keywords | react, modal, priority |

## Links

- npm: https://www.npmjs.com/package/react-modal-vision
- npm.io page: https://npm.io/package/react-modal-vision

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

- 1.0.14 (latest) — 2023-05-31
- 1.0.13 — 2023-05-30
- 1.0.12 — 2023-05-30
- 1.0.11 — 2023-05-30
- 1.0.10 — 2023-05-30
- 1.0.9 — 2023-05-30
- 1.0.8 — 2023-05-30
- 1.0.7 — 2023-05-26
- 1.0.6 — 2023-05-26
- 1.0.5 — 2023-05-26
- 1.0.4 — 2023-05-26
- 1.0.3 — 2023-05-26
- 1.0.1 — 2023-05-26
- 0.1.9 — 2023-05-25
- 0.1.6 — 2023-05-25
- … 3 more at https://npm.io/package/react-modal-vision/versions

## README

# clean modal manager for react
manage modal priority in react in a slient 

1. Support SPA and Micro-frontend Architecture 
2. Use BroadcastChannel and uniq tab id for manage logic
3. Support Class and Function Component 
4. Simple

# usage 

### for ClassComponent use bindClsVisible 
```typescript jsx
import React, { FC, HTMLProps } from "react";
import { Modal } from "antd";
import ModalControl from "react-modal-vision";

ModalControl.setPriority({ login: 0 });

// desc
export default class ClsModal extends React.PureComponent {
  state = {
    visibleA: false,
  };
  render() {
    return (
      <div>
        <button
          onClick={(e) =>
            this.setState({
              visibleA: true,
            })
          }
        >
          open
        </button>
        <Modal
          title={"tk modal A"}
          open={ModalControl.bindClsVisible({
            element: this,
            visible: this.state.visibleA,
            modalType: "login",
          })}
          onCancel={(e) => {
            this.setState({ visibleA: false });
          }}
          width={360}
        >
          <div>tk modal A</div>
        </Modal>
      </div>
    );
  }
}


```

### for FunctionComponent use useHookVisible 

```typescript jsx
import { Modal } from "antd";
import React, { FC } from "react";
import ModalControl from "react-modal-vision";

ModalControl.setPriority({ login: 0 });

// desc
export const TKModal: FC<any> = function (props) {
  const [visibleA, setVisibleA] = React.useState<boolean>(false);

  return (
    <div>
      <button
        onClick={(e) => {
          setVisibleA(true);
        }}
      >
        open tk modal x3{" "}
      </button>
      <Modal
        title={"tk modal A"}
        open={ModalControl.useHookVisible(visibleA, 'login')}
        onCancel={(e) => {
          setVisibleA(false);
        }}
        width={360}
      >
        <div>tk modal A</div>
      </Modal>
    </div>
  );
};

```

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