Skip to content

asurance/openify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7388d4b · Jul 28, 2024

History

33 Commits
Apr 14, 2024
May 14, 2024
Apr 14, 2024
Apr 14, 2024
Jul 28, 2024
Jul 28, 2024
Jul 21, 2024
Apr 14, 2024
May 7, 2024
Jun 2, 2024
Apr 14, 2024
May 12, 2024
Apr 14, 2024
May 12, 2024
Jul 21, 2024
Jun 2, 2024
Jul 28, 2024
Jul 21, 2024
May 30, 2024

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