https://github.com/peng-yin/react-hook-form-jsonschema-builder
基于react-hook-form的动态表单
https://github.com/peng-yin/react-hook-form-jsonschema-builder
Last synced: 3 months ago
JSON representation
基于react-hook-form的动态表单
- Host: GitHub
- URL: https://github.com/peng-yin/react-hook-form-jsonschema-builder
- Owner: peng-yin
- License: mit
- Created: 2024-03-26T13:08:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-09T02:33:33.000Z (about 1 year ago)
- Last Synced: 2025-03-07T23:04:33.625Z (4 months ago)
- Language: TypeScript
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hook-form-jsonschema-builder
use jsonschema Dynamic form for react-hook-form
[](https://www.npmjs.com/package/react-hook-form-jsonschema-builder-builderd)
[](https://github.com/peng-yin/react-hook-form-jsonschema-builder/blob/main/LICENSE)
[](https://github.com/peng-yin/react-hook-form-jsonschema-builder/blob/main/src/types.ts)
## Install
```sh
pnpm add react-hook-form-jsonschema-builder
# or
yarn add react-hook-form-jsonschema-builder
# or
npm i react-hook-form-jsonschema-builder
```
## Usage
```jsx
import FormRender, {
useForm,
FormControllerContext,
} from "react-hook-form-jsonschema-builder";
import { Input, Checkbox, Radio, Button } from "tdesign-react";
const schema = [
{
"field": "name",
"component": "input",
"componentProps": {
"name": "姓名",
"withwrapper": "true"
}
},
{
"field": "work",
"component": "radio",
"componentProps": {
"name": "工作",
"withwrapper": "true",
"options": [
{
"label": "Apple",
"value": "Apple"
},
{
"label": "Pear",
"value": "Pear"
},
{
"label": "Orange",
"value": "Orange"
}
]
}
},
{
"field": "age",
"component": "checkbox",
"componentProps": {
"name": "性别",
"withwrapper": "true",
"disabled": "{{ work == 'Apple' }}",
"hidden": "{{ ['Orange'].includes(work) }}",
"options": [
{
"label": "Apple",
"value": "Apple"
},
{
"label": "Pear",
"value": "Pear"
},
{
"label": "Orange",
"value": "Orange"
}
]
}
}
]
const FormItemWrapper = (WrappedComponent: any) => (props: any) => {
return (
{props.name}
);
};
const middlewares = [
{
hoc: FormItemWrapper,
filter(props: any) {
return props.withwrapper;
},
},
];
const componentsMap: Record = {
input: Input,
checkbox: Checkbox.Group,
radio: Radio.Group,
};
const functionMap = {
getDynamicTip: (value: any) => {
return `${value} aaaaaaaaa`;
},
};
export default function App() {
const formInstance = useForm({
defaultValues: {},
});
const { handleSubmit, watch } = formInstance;
const formValues = watch(); // 获取所有表单字段的值
console.log(formValues);
const onSubmit = (data: any) => console.log(data);
return (
提交
);
}
```
## try
[](https://codesandbox.io/p/sandbox/react-hook-form-jsonschema-builder-cmx394?fontsize=14&hidenavigation=1&theme=dark)
## Props
> FormRender
| Prop | Type | Default | Description |
| ------------------ | --------------------------------- | --------- | --------------------------------------------- |
| form | `FormInstance` | - | react-hook-form实例 |
| schema | `JSON` | - | json schema |
| dataSource | `Object` | - | 数据源 |
---
> FormControllerContext
| Prop | Type | Default | Description |
| ------------------ | --------------------------------- | --------- | --------------------------------------------- |
| componentsMap | `Object` | - | 组件映射, 与schema 中 component一一对应，需受控组件 |
| middlewares | `Array` | - | 增强组件的插件拓展 |
| functionMap | `Object` | - | 自定义函数，改变字段值 |
## License
[MIT License](https://github.com/peng-yin/react-hook-form-jsonschema-builder/blob/main/LICENSE) (c) [peng-yin](https://github.com/peng-yin)