Fomir: another form wheel

In the past six months, I have been working on form-related business, plus my years of experience in forms, and based on my own insights, I built a form wheel and named it Fomir.

Github address: https://github.com/forsigner/fomir

Why need another wheel?

I've tried a lot of form libraries like redux-form, formik, final-form, react-hook-form, formilyjs... they're all very good, but always close to my ideal. I would like to have a forms library with the following functionality:

• Api is concise and easy to use
• It is easy to update the form state and handle the linkage logic gracefully
• High performance, local render
• Highly customizable
• Easy to precipitate components within the team

So I created a new form library and named it Fomir .

inspiration

A large part of Fomir's design ideas and inspiration comes from slatejs , an excellent solution for boundaryizers.

characteristic

Schema-First

Fomir builds the form by passing it a Form schema, which is a tree. Form schema is very flexible, you can build any form with it.

state driven

Everything in a form is state, and changing the state of a form is very easy. It is very useful when you create complex business logic forms.

high performance

In some cases, form performance is very important. Fomir form state management is based on publish and subscribe, so the performance is very good. It doesn't re-render the whole form when you update a single field.

Easy to settle components

In fomir, the component property in the Form shema determines how the form fields are rendered. Fomir will push you to create some form components like Input, Select, DatePicker... This will allow you to easily share form components in your team.

low code friendly

fomir uses schema to build forms, so fomir is very easy to use in low-code scenarios. Fomir can be a good choice when you want to create something like a Form builder.

Type support

Fomir Form provides strong typing via Typescript, lets you catch common mistakes while coding, and provides coding intellisense.

Install

The core library fomir has nothing to do with the framework, fomir-react is the react binding library:

npm install fomir fomir-react

Basic usage

The most basic usage, using 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} />
}

use jsx

Of course, if your form interface is very customizable, you can also use 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>
  )
}

Documentation

For more detailed usage, please refer to the documentation: fomir.vercel.app .