Fomir: 又一個表單輪子

forsigner發表於2022-03-09

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

相關文章