FormRender
> 一站式中后台**表单解决方案**
## 官网
FormRender 是中后台开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求，2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见[v2 升级方案](https://xrender.fun/form-render/migrate)
## 安装
FormRender 依赖 ant design，单独使用不要忘记同时安装 `antd`
```shell
npm i form-render --save
```
## 使用
**最简使用 demo：**
```jsx
import React from 'react';
import { Button } from 'antd';
import FormRender, { connectForm } from 'form-render';
const schema = {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
props: {
options: [
{ label: '早', value: 'a' },
{ label: '中', value: 'b' },
{ label: '晚', value: 'c' }
]
}
},
},
};
class Demo extends React.Component {
render() {
const { form } = this.props;
return (
);
}
}
export default connectForm(Demo);
```
**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**
```jsx
import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';
const schema = {
type: 'object',
properties: {
input1: {
title: '简单输入框',
type: 'string',
required: true,
},
select1: {
title: '单选',
type: 'string',
props: {
options: [
{ label: '早', value: 'a' },
{ label: '中', value: 'b' },
{ label: '晚', value: 'c' }
]
}
}
}
};
const Demo = () => {
const form = useForm();
return (
);
};
export default Demo;
```