formin

Primitive for building forms in react.

View Demo View Documentation View Github

I built formin to serve as a tiny (~1.5kb) alternative to other form solutions in react with these goals in mind

  • Simple API
  • Tiny size
  • Work great with native HTML form validation
  • Great a11y support
  • Extendable

Install

$ npm install formin

Usage

Hook

import { useFormin } from 'formin'

function Form() {
  const { getInputProps, getFormProps } = useFormin({
    onSubmit: ({ values }) => {
      console.log(values)
    },
  })

  return (
    <form {...getFormProps()}>
      <input {...getInputProps({ name: 'foo' })} />
      <input {...getInputProps({ name: 'bar' })} />
      <button>Submit</button>
    </form>
  )
}

Render prop

import { Formin } from 'formin'

function MyForm() {
  return (
    <Formin
      onSubmit={({ values }) => {
        console.log(values)
      }}
    >
      {({ getFormProps, getInputProps }) => (
        <form {...getFormProps()}>
          <input {...getInputProps({ name: 'foo' })} />
          <input {...getInputProps({ name: 'bar' })} />
          <button>Submit</button>
        </form>
      )}
    </Formin>
  )
}

GitHub