easy-schema-form

一个基于 jsonschema 生成form 表单的 react 组件

目标

1. 采用标准化交互，满足大部分需求

   • 为了实现这个目的，我们对 object 类型统一为左右两栏布局;
   • 对 object Array 类型，采用了表格式布局，可以设置不常用编辑项或一些比较占用空间的编辑项通过弹层的方式打开编辑；

2. 使用了 ajv 验证库

3. 支持通过 js 表达式自定义部分交互（比如隐藏、禁用等）

4. 支持自定义组件

Live PlayGround

快速开始

Install

npm i easy-schema-form

Usage

import EasyForm from 'easy-schema-form'
import 'easy-schema-form/dist/main.css'


const schema = {
  type: "object",
  required: ['name'],
  properties: {
    name: {
      title: '用户名',
      type: "string",
      description: "zzzzzz",
      pattern: "[0-9]+"
    },
  }
}

export default class App extends React.PureComponent {
  static propTypes = {
    curTab: Proptypes.string.isRequired,
    match: Proptypes.object,
  };
  state = {
    data: {}
  };

  onChange =(value)=>{
    this.setState({
      data: value
    })
  }

  render () {
    return (
      <EasyForm onChange={this.onChange} value={this.state.data} schema={schema} />
    );
  }
}

License

MIT