formin

Primitive for building forms in react

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

You can also play around with it in CodeSandbox.io.

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

Docs

Other solutions

This library is heavily inspired by Formik but takes a different approach to the problem.

License

MIT