• Stars
    star
    169
  • Rank 224,453 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design,可以通过JSON Schema配置生成可交互的表单。

antd-schema-form

NPM version NPM version NPM version NPM version

中文文档

Antd-schema-form based Ant Design, quickly generate interactive forms with JSON Schema configuration.

This [Demo] (https://duan602728596.github.io/antd-schema-form/#/) simply shows how to construct a form by configuring schema.json.

Start using

  1. React version >=16.7.0.
  2. Use of components: s
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SchemaForm, {
  getKeysFromObject,  // Get all the keys under schema.json
  getObjectFromValue, // Object formatted into the value required by the form
  getValueFromObject  // The value of the form obtained from the form, formatted into an object
} from 'antd-schema-form';
import 'antd-schema-form/style/antd-schema-form.css'; // Introducing style

// json schema
const json = {
  id: '$root',
  type: 'object',
  title: '$root',
  properties: {}
};

ReactDOM.render(
  <SchemaForm json={ json } />,
  document.getElementById('app')
);

API

Parameter Description Type
json Json schema, required. object
value Form value. object
onOk Form confirmation event. (form: object, value: object, keys: Array<string>) => void
onCancel Form cancellation event. (form: object, keys: Array<string>) => void
okText Confirm button text. string
cancelText Cancel button text. string
footer Custom bottom content, onOk event reference (form: object) => React.Node
customComponent Custom rendering component, reference object
customTableRender Custom table column rendering component, reference object
languagePack Language configuration, reference object
formOptions Options of Form, reference object

Json schema configuration

Custom rendering component

Load components as needed

Development and testing

  • Run the command npm run dev, enter http://127.0.0.1:5050 in the browser to view the demo and develop.
  • Run the command npm run build and npm run test, and run http://127.0.0.1:6060 in the browser to run the test case.

More Repositories

1

48tools

48工具,提供公演、口袋48直播录源,公演、口袋48录播下载,封面下载,B站直播抓取,B站视频下载,A站直播抓取,A站视频下载,抖音视频下载,视频截取,视频导出gif,视频合并等功能。口袋48的pc版,可以看成员的直播、弹幕和录播。
TypeScript
448
star
2

qqtools

QQ群工具,提供48系成员直播监听,48系成员信息监听,微博监听,抖音监听,小红书监听,B站直播监听,群成员自动欢迎,定时消息,自定义命令等功能。
TypeScript
268
star
3

gulp-terser

gulp plugin, compressed es6+ code.
JavaScript
64
star
4

document

35
star
5

weibotools

微博工具。提供超话签到功能、自动点赞功能。
Vue
35
star
6

text-different

对比代码差异。
JavaScript
23
star
7

bilibiliLiveCatch

B站直播流抓取、视频快速剪切工具。
CoffeeScript
20
star
8

IndexedDB

web本地数据库存储
TypeScript
11
star
9

wbwbwb.top

微博超话签到网站已上线,欢迎各家应援会来打广告。
JavaScript
9
star
10

ZhiLianUrllib

智联招聘爬搜索结果
JavaScript
7
star
11

weibo-auto-checkin

微博超级话题自动签到脚本
JavaScript
6
star
12

qqtools-mirai

基于mirai和mirai-api-http的QQ机器人客户端。
JavaScript
5
star
13

chouka-server

摩点打赏监听机器人抽卡服务端。
JavaScript
4
star
14

weibo-assistant

微博助手APP,提供微博超级话题自动签到功能。
JavaScript
4
star
15

umi-plugin-redux-toolkit

Umi plugin, use @reduxjs/toolkit. - umi的插件,使用@reduxjs/toolkit。
TypeScript
4
star
16

node-modules-clean

清除node_modules文件夹内的冗余文件。
JavaScript
4
star
17

oicq-desktop

基于 oicq 的客户端。
TypeScript
3
star
18

qq-pk-tools

QQ群pk展示信息,可以发送echarts图表和pk信息。
JavaScript
3
star
19

mirai-login

一个 mirai 的带gui的登陆器。使用Electron开发。
JavaScript
3
star
20

indexeddb-tools-redux

IndexedDB的redux封装。
TypeScript
3
star
21

github-cli

github的命令行工具
Go
2
star
22

threenode

three.js笔记
2
star
23

good-night-topic

晚安式自动提醒
JavaScript
2
star
24

SmartQQ

SmartQQ的web接口
Python
2
star
25

gulp-memory-fs

Memory file system can also be used in gulp environment. - gulp环境下也可以使用内存文件系统。
JavaScript
2
star
26

webpackconfig

webpack + react配置文件
JavaScript
2
star
27

babel-plugin-import-components-style

Component css style loading plugin. - 组件css样式加载插件。
TypeScript
2
star
28

pocket48-web

口袋48网页版的源代码。
JavaScript
2
star
29

node-forward-proxy-server

node正向代理服务器
JavaScript
1
star
30

dpr

移动端配适
JavaScript
1
star
31

webpack-class-bug

JavaScript
1
star
32

koudai48LiveCatch

口袋48成员直播流抓取,口袋直播客户端多开功能
CoffeeScript
1
star