使用 npm

npm install antd-hooks

使用 yarn

yarn add antd-hooks

使用 pnpm

pnpm add antd-hooks

import React from 'react';
import { useTable, createHooks, useLeaveConfirmation } from 'antd-hooks';
import { Table, Button, Modal, Form, Input } from 'antd';

// 使用 useTable 管理表格状态
function UserTable() {
  const { tableProps, refresh, loading } = useTable({
    url: '/api/users',
    columns: [
      { title: '姓名', dataIndex: 'name' },
      { title: '年龄', dataIndex: 'age' },
    ],
  });

  return <Table {...tableProps} />;
}

// 使用 createHooks 创建命令式弹窗
const UserModal = ({ close, user }) => {
  const [form] = Form.useForm();
  
  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log('表单数据:', values);
      close();
    });
  };

  return (
    <Modal open title="用户信息" onOk={handleSubmit} onCancel={close}>
      <Form form={form} initialValues={user}>
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

const showUserModal = createHooks(UserModal);

// 在组件中使用
function App() {
  useLeaveConfirmation(true, '确定要离开吗？未保存的数据将会丢失。');

  return (
    <div>
      <Button onClick={() => showUserModal({ user: { name: '示例用户' } })}>
        编辑用户
      </Button>
      <UserTable />
    </div>
  );
}