@fastx/use-modal

A antd modal hook for React.

npm install @fastx/use-modal

/**
 * 基本使用
 */
import { Button, App } from "antd";
import { TestModal } from "./components/TestModal";
import { useModal } from "./hooks/useModal";

export default function Example1Basic() {
  const { message } = App.useApp();

  const modal = useModal(TestModal);

  return (
    <div className="demo-section">
      <Button
        type="primary"
        onClick={async () => {
          const value = await modal.open();
          message.success(`ok:${value}`);
        }}
      >
        打开弹窗
      </Button>
    </div>
  );
}

/**
 * 完全使用
 */
import { useState } from "react";
import { App, Button, Input, Modal, Space } from "antd";
import { TestModal } from "./components/TestModal";
import { getAntdModalProps, createUseModal, useModal } from "./hooks/useModal";

const useMyModal = createUseModal<{ name: string }>((props) => {
  const { params } = props;

  return (
    <Modal {...getAntdModalProps(props)} title="标题">
      {params?.name || "-"}
    </Modal>
  );
});

export default function Example2Basic() {
  const { message } = App.useApp();

  const [name, setName] = useState("abcde");
  const myModal = useMyModal();
  const modal = useModal(TestModal, {
    onOk() {
      message.success("modal ok");
    },
    onCancel() {
      message.success("modal cancel");
    },
    onClose() {
      message.success("modal close");
    },
  });

  return (
    <Space className="demo-section">
      <Input
        allowClear
        value={name}
        placeholder="请输入"
        onChange={(event) => setName(event.target.value)}
      />
      <Button type="primary" onClick={() => myModal.open({ name })}>
        打开MyModal
      </Button>
      <Button
        type="primary"
        onClick={async () => {
          const value = await modal.open(
            { name },
            {
              onOk(data?: string) {
                message.success(`open ok:${data}`);
              },
              onCancel() {
                message.success("open cancel");
              },
              onClose() {
                message.success("open close");
              },
            },
          );
          message.success(`onClick ok:${value}`);
        }}
      >
        打开弹窗
      </Button>
    </Space>
  );
}