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

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.