Formin
Edit page
ForminReadmeInstallUsageDocsOther solutionsLicense

formin

Primitive for building forms in react

npm version build status code coverage license downloads bundle size semantic-release

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