最近半年，一直在做表單相關的業務，加上自己多年浸淫表單的經驗，根據自己感悟，造了一個表單輪子，取名為 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。