Fomir: 又一个表单轮子

最近半年，一直在做表单相关的业务，加上自己多年浸淫表单的经验，根据自己感悟，造了一个表单轮子，取名为 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。