React Json Schema Form (Mui) 开源项目推荐

React Json Schema Form (Mui) 开源项目推荐

universal-json-schema:scroll: Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON Schema.项目地址:https://gitcode.com/gh_mirrors/un/universal-json-schema

项目介绍

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 提交代码。

本地构建和测试

universal-json-schema:scroll: Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON Schema.项目地址:https://gitcode.com/gh_mirrors/un/universal-json-schema