antd-schema-form
    TypeScript icon, indicating that this package has built-in type declarations

    4.4.0 • Public • Published

    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.

    Install

    npm i antd-schema-form

    DownloadsWeekly Downloads

    222

    Version

    4.4.0

    License

    MIT

    Unpacked Size

    205 kB

    Total Files

    132

    Last publish

    Collaborators

    • duan602728596