5.0.1 • Published 12 months ago

@markmo/antd-schema-form v5.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

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 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

ParameterDescriptionType
jsonJson schema, required.object
valueForm value.object
onOkForm confirmation event.(form: object, value: object, keys: Array<string>) => void
onCancelForm cancellation event.(form: object, keys: Array<string>) => void
okTextConfirm button text.string
cancelTextCancel button text.string
footerCustom bottom content, onOk event reference(form: object) => React.Node
customComponentCustom rendering component, referenceobject
customTableRenderCustom table column rendering component, referenceobject
languagePackLanguage configuration, referenceobject
formOptionsOptions of Form, referenceobject

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.