React Json Schema Form (Mui) 开源项目推荐
项目介绍
React Json Schema Form (Mui) 是一个基于 Material UI 的 React 组件库,专门用于将 JSON Schema 转换为表单。该项目旨在支持主流框架和 UI 框架的 JSON Schema,其详细规划已在 Universal JSON Schema 文档中阐述。通过这个项目,开发者可以轻松地将复杂的 JSON Schema 转换为直观、用户友好的表单界面。
项目技术分析
- 技术栈:React, Material UI, JSON Schema
- 版本控制:支持 MUI 5+ 及 MUI 4 的 legacy 版本
- 构建工具:Webpack 5
- 测试覆盖:高覆盖率的测试,包括 Codecov 和 Snyk 的安全扫描
- 持续集成:GitHub Actions 和 BrowserStack 支持的自动化测试
项目及技术应用场景
- Web 开发:适用于需要动态生成表单的前端项目,如管理后台、配置工具等。
- 数据收集:用于需要根据 JSON Schema 自动生成表单的数据收集系统。
- API 集成:与后端 API 结合,自动生成与 API 数据结构匹配的表单。
项目特点
- 高度定制化:支持自定义主题、组件、验证和拦截器。
- 实时更新:表单数据实时更新,支持动态添加和删除字段。
- 多版本支持:兼容 MUI 5+ 和 MUI 4 的 legacy 版本。
- 丰富的功能:支持
oneOf
,anyOf
,allOf
等 JSON Schema 的高级特性。 - 易于集成:通过 npm 简单安装,快速集成到现有项目中。
安装指南
npm install --save react-jsonschema-form-material-ui
基本使用示例
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
import schema from '../simple/schema.json';
import uiSchema from '../simple/ui-schema.json';
import givenFormData from '../simple/form-data.json';
export default () => {
const [formData, setFormData] = React.useState(givenFormData);
return <MaterialJsonSchemaForm
schema={schema}
uiSchema={uiSchema}
formData={formData}
onChange={({ formData }) => setFormData(formData)}
onSubmit={(submittedData) => console.log('form submitted', submittedData)}
/>;
};
高级使用示例
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
const givenSchema = require('./path-to your-schema.json');
const givenUISchema = require('./path-to your-ui-schema.json');
const givenFormData = require('./path-to your-ui-formData.json');
const Example = () => {
const [formData, setFormData] = React.useState(givenFormData);
const onSubmit = (value, callback) => {
console.log('onSubmit: %s', JSON.stringify(value));
setTimeout(() => callback && callback(), 2000);
}
const onCancel = () => {
console.log('on reset being called');
}
const onFormChanged = ({ formData }) => setFormData(formData);
return (
<MaterialJsonSchemaForm
schema={givenSchema}
uiSchema={givenUISchema}
formData={formData}
onChange={onFormChanged}
onSubmit={onSubmit}
onCancel={onCancel}
/>
);
}
export default Example;
贡献指南
我们欢迎所有形式的贡献,包括但不限于功能增强、bug 修复等。请通过 GitHub 问题 提交问题,并通过 pull request 提交代码。