react-modal-vision

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

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

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>
  );
};