antd-schema-form

中文文档

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.