乐趣区

关于react.js:Fomir-又一个表单轮子

jiezi

最近半年，始终在做表单相干的业务，加上本人多年浸淫表单的教训，依据本人感悟，造了一个表单轮子，取名为 Fomir。

Github 地址：https://github.com/forsigner/fomir

为什么又要一个轮子？

我尝试了很多表单库，比方 redux-form、formik、final-form、react-hook-form、formilyjs… 它们都十分优良，但和我的现实型总是差一点。我心愿有一个具备以下性能的表单库：

  • Api 简洁，易用应用
  • 易于更新表单状态，优雅解决联动逻辑
  • 高性能，部分 render
  • 高可定制
  • 易于团队内积淀组件

所以我创立了一个新的表单库，并将其命名为 Fomir。

灵感

Fomir 的设计思路和灵感有很大一部分来自 slatejs，一个优良的边界器解决方案。

个性

Schema-First

Fomir 通过传递一个 Form schema 来构建表单, Form schema 是一棵树。Form schema 非常灵活，您能够通过它构建任何表单。

状态驱动

表单中的一切都是状态，扭转表单状态非常容易。当您创立简单业务逻辑表单时，它十分有用。

高性能

在某些状况下，表单性能十分重要。Fomir 表单状态治理基于公布订阅的，因而性能很好。当你更新单个字段时，它不会从新渲染整个表单。

易于积淀组件

在 fomir 中，Form shema 中的 component 属性决定如何渲染表单字段。Fomir 将促使你创立一些表单组件，例如 Input、Select、DatePicker… 这将使您在团队中轻松共享表单组件。

低代码敌对

fomir 应用 schema 构建表单，因而 fomir 在低代码场景中非常容易应用。当你想创立相似 Form builder 这些货色时，Fomir 可能是一个不错的抉择。

类型反对

Fomir Form 通过 Typescript 提供强类型，让您在编码时捕获常见谬误，并提供编码智能感知。

装置

外围库 fomir 与框架无关, fomir-react 是 react binding 库：

npm install fomir fomir-react

根本用法

最根本用法，应用 useForm Api:

function BasicForm() {
  const form = useForm({onSubmit(values) {alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: '',
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

应用 jsx

当然，如果你的表单界面定制性十分强，你也能够应用 jsx:

function BasicForm() {
  const form = useForm({onSubmit(values) {alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
  })

  return (<Form form={form}>
      <h2>Basic Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="First Name" name="firstName" />
        <Field component="Input" label="Last Name" name="lastName" />
      </Box>

      <h2>Extra Info</h2>
      <Box bgGray100 rounded p3 mb4>
        <Field component="Input" label="Email" name="email" />
        <Field component="Textarea" label="Bio" name="bio" />
      </Box>

      <button>Submit</button>
    </Form>
  )
}

文档

更具体的应用办法请参见文档：fomir.vercel.app。

退出移动版