一个帮助简化 antd Modal 状态管理的工具

一个帮助简化 antd Modal 状态管理的工具

安装

pnpm add @cicara/better-modal

使用方式

1. 以常规方式创建 Antd 模态，唯一不同的是使用 useModalContext 自动管理Modal的状态。

   import { Input, Modal } from "antd";
   import { useModalContext } from "@cicara/better-modal";
   import { Form } from "antd";
   import { useCallback, useEffect } from "react";
   
   export type MyModalProps = {
     value?: string;
   };
   
   export function MyModal(props: MyModalProps) {
     const modal = useModalContext<string>(); // <- First use modal context
   
     const [form] = Form.useForm();
   
     const handleSubmit = useCallback(
       (values: { name: string }) => {
         modal.resolve(values.name); // <- Close the modal and return the data or message
       },
       [modal.resolve]
     );
   
     useEffect(() => {
       if (!modal.visible) {
         return;
       }
       form.setFieldsValue({ name: prop