# @markmo/antd-schema-form

> Based on antd, the form is configured through json schema. - 基于antd，通过json schema配置表单。

Latest version **5.0.1** (published 2023-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @markmo/antd-schema-form
pnpm add @markmo/antd-schema-form
yarn add @markmo/antd-schema-form
bun add @markmo/antd-schema-form
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2023-05-15 |
| First published | 2023-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 200 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 段昊辰 |
| Maintainers | markmo |
| Keywords | form, antd, react-component |

## Links

- npm: https://www.npmjs.com/package/@markmo/antd-schema-form
- Repository: https://github.com/markmo/antd-schema-form
- Homepage: https://duan602728596.github.io/antd-schema-form/#/
- Issues: https://github.com/markmo/antd-schema-form/issues
- npm.io page: https://npm.io/package/@markmo/antd-schema-form

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.4.1
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.0.1 (latest) — 2023-05-15

## README

# antd-schema-form

[![NPM version][antd-schema-form-image]][antd-schema-form-url]
[![NPM version][react-image]][react-url]
[![NPM version][react-dom-image]][react-dom-url]
[![NPM version][ant-design-image]][ant-design-url]

[antd-schema-form-image]: https://img.shields.io/npm/v/antd-schema-form.svg
[antd-schema-form-url]: https://www.npmjs.com/package/antd-schema-form

[react-image]: https://img.shields.io/badge/react-%3E=16.7.0-red.svg
[react-url]: https://github.com/facebook/react

[react-dom-image]: https://img.shields.io/badge/react--dom-%3E=16.7.0-red.svg
[react-dom-url]: https://github.com/facebook/react

[ant-design-image]: https://img.shields.io/badge/ant--design-%3E=5-red.svg
[ant-design-url]: https://github.com/ant-design/ant-design

[中文文档](README-zhCN.md)

Antd-schema-form based [Ant Design](https://ant.design/), quickly generate interactive forms with [JSON Schema](http://json-schema.org/draft-07/json-schema-validation.html) 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
  ```javascript
  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&lt;string&gt;) => void |
| onCancel          | Form cancellation event.                                                    | (form: object, keys: Array&lt;string&gt;) => void |
| okText            | Confirm button text.                                                        | string                 |
| cancelText        | Cancel button text.                                                         | string                 |
| footer            | Custom bottom content, onOk event [reference](https://github.com/duan602728596/antd-schema-form/blob/master/src/components/FormObject/FormObject.tsx#L143) | (form: object) => React.Node |
| customComponent   | Custom rendering component, [reference](docs/custom_rendering_component.md) | object                 |
| customTableRender | Custom table column rendering component, [reference](docs/custom_rendering_component.md#custom-table-column-rendering-component) | object |
| languagePack      | Language configuration, [reference](language/default.json)                  | object                 |
| formOptions       | Options of `Form`, [reference](https://ant.design/components/form/#Form)    | object                 |

## [Json schema configuration](docs/json_schema_configuration.md)

## [Custom rendering component](docs/custom_rendering_component.md)

## [Load components as needed](docs/load_components_as_needed.md)

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

---
_Source: https://npm.io/package/@markmo/antd-schema-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._