Awesome Open Source
Awesome Open Source

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. 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'
            }
          ]
        ]
      }
    }
  ]
}
  1. React version >=16.7.0.
  2. 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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,988
react-component (208
form (188
antd (140
ant-design (112
ant (34