formin

0.11.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i formin

Weekly Downloads

2

Version

0.11.1

License

MIT

Unpacked Size

26.1 kB

Total Files

6

Last publish

Collaborators

  • alexandernanberg