https://github.com/alexandernanberg/formin

📋 Primitive for building forms in React
https://github.com/alexandernanberg/formin

form forms react

Last synced: 2 days ago
JSON representation

📋 Primitive for building forms in React

• Host: GitHub
• URL: https://github.com/alexandernanberg/formin
• Owner: alexandernanberg
• License: mit
• Created: 2018-08-24T13:53:51.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T05:52:51.000Z (over 1 year ago)
• Last Synced: 2024-09-30T08:47:21.638Z (about 1 month ago)
• Topics: form, forms, react
• Language: JavaScript
• Homepage:
• Size: 3.38 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 16
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# formin

> Primitive for building forms in react

[![npm version](https://badgen.net/npm/v/formin)](https://www.npmjs.com/package/formin)

![Publish package](https://github.com/alexandernanberg/formin/workflows/Publish%20package/badge.svg)

[![code coverage](https://badgen.net/codecov/c/github/alexandernanberg/formin)](https://codecov.io/gh/alexandernanberg/formin)

[![license](https://badgen.net/npm/license/formin)](https://www.npmjs.com/package/formin)

[![downloads](https://badgen.net/npm/dm/formin)](https://www.npmjs.com/package/formin)

[![bundle size](https://badgen.net/bundlephobia/minzip/formin)](https://bundlephobia.com/result?p=formin)

[![semantic-release](https://badgen.net/badge/%F0%9F%93%A6%F0%9F%9A%80/semantic%20release/e10079)](https://github.com/semantic-release/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](https://codesandbox.io/s/mj1jr59nxp).

## Usage

### Hook

```js

import { useFormin } from 'formin'

function Form() {

  const { getInputProps, getFormProps } = useFormin({

    onSubmit: ({ values }) => {

      console.log(values)

    },

  })

  return (

    

      

      

      Submit

    

  )

}

```

### Render prop

```js

import { Formin } from 'formin'

function MyForm() {

  return (

     {

        console.log(values)

      }}

    >

      {({ getFormProps, getInputProps }) => (

        

          

          

          Submit

        

      )}

    

  )

}

```

## Other solutions

This library is heavily inspired by [Formik](https://github.com/jaredpalmer/formik) but takes a different approach to the problem.

## License

[MIT](./license)