@formulier/react

Simple, performant form library for React

Docs

Find the docs at https://vjee.github.io/formulier/.

Example

import {
  FormProvider,
  useCreateForm,
  useFormInstance,
  useFormField,
  useSubmitHandler,
} from '@formulier/react'

function MyForm() {
  const form = useCreateForm({
    initialValues: {
      firstName: 'Nico',
      age: 26,
    },
  })

  const onSubmit = useSubmitHandler(form, values => {
    // handle form submission
    console.log(`${values.firstName} is ${values.age} years old.`)
  })

  return (
    <form onSubmit={onSubmit}>
      <FormProvider form={form}>
        <TextField name="firstName" placeholder="First name" />
        <IntegerField name="age" placeholder="Age" />
        <button type="submit">Submit</button>
      </FormProvider>
    </form>
  )
}

function TextField({name, placeholder}) {
  const form = useFormInstance()
  const [field] = useFormField(form, {name})

  return (
    <input
      type="text"
      placeholder={placeholder}
      {...field}
      value={field.value || ''}
      onChange={event => field.onChange(event.target.value)}
    />
  )
}

function IntegerField({name, placeholder}) {
  const form = useFormInstance()
  const [field] = useFormField(form, {name})

  return (
    <input
      type="number"
      placeholder={placeholder}
      {...field}
      value={field.value || ''}
      onChange={event => field.onChange(parseInt(event.target.value, 10))}
    />
  )
}