Drip-Form

简体中文 | English | 官方文档 | 讨论组

📖 介绍

基于 React 和 JSONSchema 的动态表单解决方案

Drip-Form 使用 JSON 配置文件生成具备数据联动、复杂校验、异步请求及嵌套的表单，可以减少复杂冗余的表单开发工作。

配套可视化表单生成器、Node 校验工具使用，可进一步提升表单开发的效率。

Drip-Form 具有以下五大 ✨ 亮点 ✨：

• 自动化：可根据表单数据自动生成初始化表单。
• 语义化：简洁高效的 JSON 协议有助于开发者理解。
• 校验一体化：依托于 ajv 的标准化校验能力，可实现前后端校验一体化。
• 可视化：可视化搭建表单及修改表单 Schema。
• 可扩展：支持二次开发，可扩展自定义组件集、校验集。

🔨 如何使用

环境依赖

• node >=13.14.0
• yarn >=1.0.0

安装依赖包

1npm install @jdfed/drip-form @jdfed/drip-form-theme

简单使用

1import React, { memo } from 'react'
2// 引入核心包和主题
3import DripForm from '@jdfed/drip-form'
4import dripTheme from '@jdfed/drip-form-theme'
5import '@jdfed/drip-form-theme/dist/index.css'
6// 引入配置项
7import unitedSchema from './unitedSchema.json'
8
9const Form = memo(() => (
10	<DripForm unitedSchema={unitedSchema} uiComponents={{ drip: dripTheme }} />
11))

🤔 贡献

此存储库的主要目的是继续不断发展和完善 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 JD.com, Inc.