Skip to content

asurance/openify

Repository files navigation

Openify

简化 React 弹窗类组件调用的工具

快速上手

安装依赖

npm install openify
# or
yarn add openify
# or
pnpm add openify

开发组件,注意实现visible, onClose, afterClose这三个 props

type MyModalProps = OpenableProps<xxx> & {
  /** your props **/
};

const MyModal = ({ visible, onClose, afterClose, ...props }: MyModalProps) => {
  // your code here
  return (
    <Modal
      visible={visible}
      onOk={onClose}
      onCancel={onClose}
      afterClose={afterClose}
      // your other props
    >
      {/** your content here **/}
    </Modal>
  );
};

使用openify生成对应的open函数

const openMyModal = openify(MyModal);

使用open方法

function MyApp() {
  return <Button onClick={() => openMyModal()}>打开弹窗</Button>;
}