Awesome
<a href='http://drip.jd.com/drip-form/index.html'> <h1 style="display: flex; align-items: center; justify-content: center"> <img src='https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg'/> <span style="margin-left: 10px">Drip-Form</span> </h1> </a> <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-BADGE:END -->📖 介绍
基于 React 和 JSONSchema 的动态表单解决方案
Drip-Form 使用 JSON 配置文件生成具备数据联动、复杂校验、异步请求及嵌套的表单,可以减少复杂冗余的表单开发工作。
配套可视化表单生成器、Node 校验工具使用,可进一步提升表单开发的效率。
Drip-Form 具有以下五大 ✨ 亮点 ✨:
- 自动化:可根据表单数据自动生成初始化表单。
- 语义化:简洁高效的 JSON 协议有助于开发者理解。
- 校验一体化:依托于
ajv
的标准化校验能力,可实现前后端校验一体化。 - 可视化:可视化搭建表单及修改表单
Schema
。 - 可扩展:支持二次开发,可扩展自定义组件集、校验集。
🔨 如何使用
环境依赖
- node >=13.14.0
- yarn >=1.0.0
安装依赖包
npm install @jdfed/drip-form @jdfed/drip-form-theme
简单使用
import React, { memo } from 'react'
// 引入核心包和主题
import DripForm from '@jdfed/drip-form'
import dripTheme from '@jdfed/drip-form-theme'
import '@jdfed/drip-form-theme/dist/index.css'
// 引入配置项
import unitedSchema from './unitedSchema.json'
const Form = memo(() => (
<DripForm unitedSchema={unitedSchema} uiComponents={{ drip: dripTheme }} />
))
🤔 贡献
此存储库的主要目的是继续不断发展和完善 Drip-Form,使得它的性能更强,功能更稳定,更利于使用。如果您对于 Drip-Form 有建议或者错误修正等需求,欢迎提 issue
和 merge
,我们极力感谢社区促进错误修正和改进。
请确保在提 pull request 之前已经阅读了贡献指南
✨ 贡献者
Thanks goes to these wonderful people
开发路线图
:sparkle: View the DripForm roadmap
在 DripForm 开发路线图中,您可以了解我们正在开发哪些功能、它们处于什么阶段以及我们希望何时将它们带给您。对路线图上的项目有任何问题或意见吗?通过GitHub discussions反馈讨论分享您的反馈。
🌟 感谢支持
如果 Drip-Form 解决了您的开发痛点,对您有帮助的话,请不要吝惜您的 star
🌟 哦!
📄 许可
MIT License
Copyright (c) 2020 <a href='https://www.jd.com/'>JD.com</a>, Inc.