What is Fomir?

Fomir is a Schema-First library for building form.

Source code in Github: Fomir.

Why create a new form library?

I have tried many form libraries, like redux-form, formik, final-form, react-hook-form... None of them suit my taste. I would expect a forms library with these features:

• Using schema
• Easy to update form state
• High Performance
• More abstract

So I create a new form library, and name it to Fomir.

Philosophy

Schema-First

Fomir create form by passing a form schema which is a json tree. the form schema is very flexible, you can create any form by the schema.

State-Driven

Every thing in form schema is state, you can build the form interface easily. it's useful when you create a dynamic form.

High Performance

In some case, form performance is very important. Performance of Fomir is high because of subscription-based form state management. It will not rerender the whole form when you update a single field.

Sharing and Collaborating

In fomir, the component property in form schema decide how to render the form field. Fomir will push you to create some form component like Input, Select, DatePicker... this will make it easy to share form component in you team.

Low-code friendly

Fomir builds form with schema, so fomir is very easy to use in low-code scenarios. when you want to create something like form builder, Fomir might be a good choice.

Strongly Typed

Fomir Form provides strong typing via Typescript to allow you to catch common bugs at coding time, and providing the coding intellisense.

Installation

npm install fomir fomir-react

Basic Usage

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} />
}

Documentation

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