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. Before using, you need to configure antd in the babel on-demand loading.
2. You need to configure the babel-loader as follows:

{
  test: /node_modules[\\/]antd-schema-form[\\/].*\.jsx?$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          [
            'import',
            {
              libraryName: 'antd',
              libraryDirectory: 'es',
              style: 'css'
            }
          ]
        ]
      }
    }
  ]
}

3. React version >=16.7.0.
4. Use of components:

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.