{"id":48486651,"url":"https://github.com/jaykou25/react-admin-kit","last_synced_at":"2026-04-07T10:02:43.739Z","repository":{"id":62913926,"uuid":"548297140","full_name":"jaykou25/react-admin-kit","owner":"jaykou25","description":"React 中后台系统的最佳伴侣. 快速构建高质量表单和表格的 React 组件库.","archived":false,"fork":false,"pushed_at":"2026-03-25T06:46:36.000Z","size":9687,"stargazers_count":21,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-03-26T10:59:11.459Z","etag":null,"topics":["ant-design","antd","form","json-form","pro-table","protable","rak","rak-js","rakjs","react-admin","react-admin-kit","schema-form","schemaform"],"latest_commit_sha":null,"homepage":"https://jaykou25.github.io/react-admin-kit/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaykou25.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-09T09:25:26.000Z","updated_at":"2026-03-25T06:46:42.000Z","dependencies_parsed_at":"2023-01-24T08:46:12.804Z","dependency_job_id":"ea4fb9e6-e2ae-46af-a741-5f164afe83e9","html_url":"https://github.com/jaykou25/react-admin-kit","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":"0.052631578947368474","last_synced_commit":"09313e97a0d26f4a0b668cad70adddc29aa52ba6"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/jaykou25/react-admin-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaykou25%2Freact-admin-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaykou25%2Freact-admin-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaykou25%2Freact-admin-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaykou25%2Freact-admin-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaykou25","download_url":"https://codeload.github.com/jaykou25/react-admin-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaykou25%2Freact-admin-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31508282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","form","json-form","pro-table","protable","rak","rak-js","rakjs","react-admin","react-admin-kit","schema-form","schemaform"],"created_at":"2026-04-07T10:02:43.004Z","updated_at":"2026-04-07T10:02:43.730Z","avatar_url":"https://github.com/jaykou25.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-admin-kit\n\n[中文文档](./README.zh-CN.md)\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-admin-kit\"\u003e\u003cimg src=\"https://badgen.net/npm/v/react-admin-kit\" alt=\"Version\" /\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/react-admin-kit\"\u003e\u003cimg src=\"https://badgen.net/npm/dm/react-admin-kit\" alt=\"Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-admin-kit\"\u003e\u003cimg src=\"https://badgen.net/npm/license/react-admin-kit\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"left\"\u003e\n    \u003cimg alt='react admin kit logo' height=\"80\" src=\"https://github.com/jaykou25/react-admin-kit/raw/v0.3/public/rak.png\"\u003e\n  \u003cp style=\"font-size: 22px\"\u003eA React component library for rapidly building forms and tables\u003c/p\u003e\n\u003c/p\u003e\n\n[Documentation (github pages)](https://jaykou25.github.io/react-admin-kit/)\n\nVersion v1.0 is officially released! Comprehensive test coverage with code coverage over 90% and branch coverage over 85%.\n\n \u003cimg alt='coverage' width='490px'  src=\"images/coverage.png\"\u003e\n\n## Introduction\n\nReact Admin Kit (RAK) is a component library based on React and Ant Design, designed for rapidly building forms and tables in admin systems. Using RAK not only greatly improves development efficiency but also reduces maintenance costs for different developers due to its convention-based API. Additionally, since forms and tables are generated from configuration arrays, reusing forms and tables across different pages becomes very simple.\n\n## Why This Component Library?\n\nOr why do we need RAK when ProComponent already exists?\n\nFor admin business systems, ProComponent's components like `ProLayout` and `ProTable` have become a paradigm, greatly facilitating our frontend developers.\n\nHowever, ProComponent still has some issues, or it doesn't quite achieve the same user experience as Antd. The reason, for me, is that it takes too much time to read the documentation and select the right components...\n\nWe want to focus on just two points: Table and Form, which are the most commonly used page structures in admin systems. We connect Table and Form with schema at the core, and derive other components from this.\n\nIf you're a ProComponent user, most APIs can be passed through to RAK. If you haven't used ProComponent before, you can start directly with RAK's examples and documentation, progressively using other APIs.\n\n## How to Use\n\nRAK depends on Antd, so you need to install Antd first.\n\n```bash\nnpm install antd\n```\n\nInstall RAK\n\n```bash\nnpm install react-admin-kit\n```\nView [Component Documentation](https://jaykou25.github.io/react-admin-kit/components/schema-form) and get started ✨.\n\n\u003e If you want to use antd v4, please see the notes below 👇\n\u003e\n\u003e Using antd v4 requires importing the style file.\n\u003e\n\u003e ```js\n\u003e import 'antd/dist/antd.min.css';\n\u003e ```\n\u003e\n\u003e Since ProComponent introduces some components from antd v5, such as ColorPicker. If you use the vite bundler, you will encounter errors during local development. You can switch to the webpack bundler for development.\n\u003e\n\u003e Please use RAK \u003c v0.4, v0.4 and later only support antd v5 or higher version.\n\n### Generate Forms\n\nConventional forms are composed of Form.Item.\n\n```js\nimport { Form, Input, DatePicker, Select } from 'antd';\n\n\u003cForm onFinish={handleFinish}\u003e\n  \u003cForm.Item label=\"Customer Name\" name=\"name\"\u003e\n    \u003cInput /\u003e\n  \u003c/Form.Item\u003e\n\n  \u003cForm.Item label=\"Contract Date\" name=\"contractDate\"\u003e\n    \u003cDatePicker /\u003e\n  \u003c/Form.Item\u003e\n\n  \u003cForm.Item label=\"Payment Method\" name=\"payType\"\u003e\n    \u003cSelect\n      options={[\n        { label: 'Alipay', value: '1' },\n        { label: 'WeChat', value: '2' },\n      ]}\n    /\u003e\n    ;\n  \u003c/Form.Item\u003e\n\u003c/Form\u003e;\n```\n\nRAK generates forms through schemas, where one schema corresponds to one Form.Item.\n\n```js\nimport { SchemaForm } from 'react-admin-kit';\n\nconst columns = [\n  {\n    title: 'Customer Name',\n    dataIndex: 'name',\n  },\n  {\n    title: 'Contract Date',\n    dataIndex: 'contractDate',\n    valueType: 'date',\n  },\n  {\n    title: 'Payment Method',\n    dataIndex: 'payType',\n    valueType: 'select',\n    fieldProps: {\n      options: [\n        { label: 'Alipay', value: '1' },\n        { label: 'WeChat', value: '2' },\n      ],\n    },\n  },\n];\n\n// Please refer to each component's documentation\nconst Demo = () =\u003e {\n  return \u003cSchemaForm columns={columns} onFinish={handleFinish} /\u003e;\n};\n```\n\n### Generate Tables\n\n```js\nimport { ProTable } from 'react-admin-kit';\n\n// Please refer to each component's documentation\nconst Demo = () =\u003e {\n  return \u003cProTable columns={columns} /\u003e;\n};\n```\n\n## Core Components Introduction\n\nRAK has only 3 core components, and they are composable:\n\n- `SchemaForm - JSON Form`: `SchemaForm`\n- `ModalForm - Modal Form`: `Modal` + `SchemaForm`\n- `ProTable - Advanced Table`: `ProTable` + `ModalForm`\n\nSo component properties can be passed through. For example, in the `ModalForm` component, you can pass through `SchemaForm` properties. In the `ProTable` component, you can pass through `Modal` and `SchemaForm` properties. See each component's documentation for details.\n\n## Project Dependencies\n\n```js\n{\n  \"@ant-design/pro-form\": \"~2.25.0\",\n  \"@ant-design/pro-table\": \"~3.15.0\",\n  \"@ant-design/pro-utils\": \"~2.15.0\",\n}\n\n// peerDependency\n{\n  \"antd\": \"\u003e=4.23.4\",\n}\n```\n\nRecommend using antd v5 or higher version.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaykou25%2Freact-admin-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaykou25%2Freact-admin-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaykou25%2Freact-admin-kit/lists"}