@kingteza / crud-component

用Ant Design和TypeScript构建的React CRUD组件库。

安装

npm install @kingteza/crud-component

先决条件

此库有以下需要安装的对等依赖项：

npm install antd@^5.22.6 react@^18.3.1 react-dom@^18.3.1 react-router-dom@^7.0.0

CSS样式

重要: 你需要在应用程序入口点手动导入CSS样式：

import '@kingteza/crud-component/styles';

它应该在应用程序的根目录中导入一次(例如，在 main.tsx， index.tsx，或者 App.tsx 文件)。

设置

选项1：使用CrudComponentProvider（推荐）

将应用程序包装成 CrudComponentProvider 自动初始化库：

import '@kingteza/crud-component/styles';
import { CrudComponentProvider } from '@kingteza/crud-component';

function App() {
  return (
    <CrudComponentProvider>
      {/* Your app components */}
      <YourComponents />
    </CrudComponentProvider>
  );
}

使用自定义i18n选项：

import { CrudComponentProvider } from '@kingteza/crud-component';

function App() {
  return (
    <CrudComponentProvider
      i18nOptions={{
        language: 'en',
        translations: {
          en: {
            'crud-component': {
              // your custom translations
            }
          }
        },
        i18nInstance: existingI18nInstance // optional: use your existing i18n instance
      }}
    >
      <YourComponents />
    </CrudComponentProvider>
  );
}

选项2：手动设置（遗留）

如果您喜欢手动初始化，您仍然可以使用 setupI18n()：

import '@kingteza/crud-component/styles';
import { setupI18n } from '@kingteza/crud-component';

// Basic setup with default English translations
setupI18n();

// Or with custom options
setupI18n({
  language: 'en',
  translations: {
    en: {
      'crud-component': {
        // your custom translations
      }
    }
  },
  i18nInstance: existingI18nInstance // optional: use your existing i18n instance
});

使用

import '@kingteza/crud-component/styles';
import { CrudComponentProvider, CrudComponent } from '@kingteza/crud-component';
import { Button } from '@kingteza/crud-component/common';

function App() {
  return (
    <CrudComponentProvider>
      <CrudComponent
        fields={[
          { type: "text", name: "name", label: "Name", required: true },
          { type: "select", name: "status", label: "Status", options: [
            { value: "active", label: "Active" },
            { value: "inactive", label: "Inactive" }
          ]}
        ]}
        data={[]}
        onSave={(data) => console.log(data)}
      />
    </CrudComponentProvider>
  );
}

可以进口

该库为导入组件提供了几个入口点：

// CSS styles (required - import once at your app entry point)
import '@kingteza/crud-component/styles';

// Main CRUD component
import { CrudComponent } from '@kingteza/crud-component';

// Provider component
import { CrudComponentProvider } from '@kingteza/crud-component';

// Common components
import { Button, Select, DatePicker } from '@kingteza/crud-component/common';

// Utility functions
import { DateUtil } from '@kingteza/crud-component/util';

文档

有关组件及其道具的详细文档，请访问我们的 GitHub库.

许可证

麻省理工学院