form-render
v2.5.1
Published
通过 JSON Schema 生成标准 Form,常用于自定义搭建配置界面生成
Downloads
50,212
Readme
一站式中后台表单解决方案
官网
https://xrender.fun/form-render
FormRender 是中后台开箱即用的表单解决方案,通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求,2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持,同时保持开发者能快速上手,并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上,我们做了一系列的取舍,详见v2 升级方案
安装
FormRender 依赖 ant design,单独使用不要忘记同时安装 antd
npm i form-render --save
使用
最简使用 demo:
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 (
<div>
<FormRender form={form} schema={schema} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
}
}
export default connectForm(Demo);
对于函数组件,FormRender 提供了 useForm
hooks, 书写更为灵活
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 (
<div>
<FormRender form={form} schema={schema} />
<Button type="primary" onClick={form.submit}>
提交
</Button>
</div>
);
};
export default Demo;