/antd-schema-form

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

Primary LanguageTypeScriptMIT LicenseMIT

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

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.