lvdong / drip-form

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

Home Page:https://jdfed.github.io/drip-form/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drip-Form

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

Version node yarn document License: MIT All Contributors website

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(() => {
  return 
    <DripForm
      unitedSchema={unitedSchema}
      uiComponents={{'drip': dripTheme}}
    />
})

🤔 贡献

此存储库的主要目的是继续不断发展和完善Drip-Form,使得它的性能更强,功能更稳定,更利于使用。如果您对于Drip-Form有建议或者错误修正等需求,欢迎提issuemerge,我们极力感谢社区促进错误修正和改进。

贡献者

Thanks goes to these wonderful people

🌟 感谢支持

如果Drip-Form解决了您的开发痛点,对您有帮助的话,请不要吝惜您的star🌟哦!

📄 许可

MIT License

Copyright (c) 2020 JD.com, Inc.

About

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

https://jdfed.github.io/drip-form/

License:MIT License


Languages

Language:TypeScript 80.7%Language:JavaScript 15.9%Language:CSS 2.6%Language:Stylus 0.8%