1.0.14 • Published 11 months ago
react-modal-vision v1.0.14
clean modal manager for react
manage modal priority in react in a slient
- Support SPA and Micro-frontend Architecture
- Use BroadcastChannel and uniq tab id for manage logic
- Support Class and Function Component
- 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>
);
};
1.0.14
11 months ago
1.0.13
12 months ago
1.0.12
12 months ago
1.0.11
12 months ago
1.0.10
12 months ago
1.0.9
12 months ago
1.0.8
12 months ago
1.0.7
12 months ago
1.0.6
12 months ago
1.0.5
12 months ago
1.0.4
12 months ago
1.0.3
12 months ago
1.0.1
12 months ago
0.1.9
12 months ago
0.1.6
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.0
12 months ago