Antd Schema Form Save

Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design,可以通过JSON Schema配置生成可交互的表单。

Project README

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

Parameter Description Type
json Json schema, required. object
value Form value. object
onOk Form confirmation event. (form: object, value: object, keys: Array) => void
onCancel Form cancellation event. (form: object, keys: Array) => 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.
Open Source Agenda is not affiliated with "Antd Schema Form" Project. README Source: duan602728596/antd-schema-form
Stars
167
Open Issues
9
Last Commit
1 month ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating