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
- React version
>=16.7.0
. - 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<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
, enterhttp://127.0.0.1:5050
in the browser to view the demo and develop. - Run the command
npm run build
andnpm run test
, and runhttp://127.0.0.1:6060
in the browser to run the test case.