https://github.com/jovidecroock/hooked-form

Performant 2KB React library to manage your forms
https://github.com/jovidecroock/hooked-form

forms hooks modern react react-native reactjs

Last synced: 13 days ago
JSON representation

Performant 2KB React library to manage your forms

• Host: GitHub
• URL: https://github.com/jovidecroock/hooked-form
• Owner: JoviDeCroock
• License: mit
• Created: 2018-11-16T17:51:58.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-07-18T20:14:44.000Z (over 1 year ago)
• Last Synced: 2024-10-23T21:27:06.809Z (21 days ago)
• Topics: forms, hooks, modern, react, react-native, reactjs
• Language: TypeScript
• Homepage: https://jovidecroock.github.io/Hooked-Form/
• Size: 11.8 MB
• Stars: 112
• Watchers: 3
• Forks: 10
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Hooked-Form

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

[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)

[![Build Status](https://travis-ci.com/JoviDeCroock/hooked-form.svg?branch=main)](https://travis-ci.com/JoviDeCroock/hooked-form)

[![Bundle size](https://badgen.net/bundlephobia/minzip/hooked-form)](https://badgen.net/bundlephobia/minzip/hooked-form)

[![codecov](https://codecov.io/gh/JoviDeCroock/Hooked-Form/branch/main/graph/badge.svg)](https://codecov.io/gh/JoviDeCroock/Hooked-Form)

[Documentation](https://jovidecroock.github.io/Hooked-Form/)

[Example](https://codesandbox.io/s/sweet-poincare-3km8r4k16)

## 🌍 Installation

**yarn**

```bash

  yarn add hooked-form

```

**npm**

```bash

  npm i --save hooked-form

```

**UMD**

_dev_:

```html

```

## 🎨 Example

```jsx

import React from 'react';

import { HookedForm, useField } from 'hooked-form';

const StringField = ({ fieldId, label }) => {

  const [{ onChange }, { touched, error, value }] = useField(fieldId);

  const onInput = React.useCallback(e => onChange(e.currentTarget.value), [

    onChange,

  ]);

  return (

    

      {label + ' '}

      

      {touched && error && 
{error}
}

    

  );

};


const App = () => {

  return (

     ({ name: '' }), [])}

      validate={values => (values.name ? {} : { name: 'Required' })}

    >

      
Hooked Form

      

      

    

  );

};


render(, document.body);

```

## 💿 Modern build

This library offers a modern build (ES2015 output), this is smaller and parses faster in the browser.

So if you don't plan to target older browsers feel free to use this.

### Webpack

```json

  "resolve": {

    "alias": {

      "hooked-form": "hooked-form/dist/hooked-form.modern.js"

    }

  }

```

### Parcel

```json

  "alias": {

    "hooked-form": "hooked-form/dist/hooked-form.modern.js"

  }

```

## 📢 Credits

- [Microbundle](https://github.com/developit/microbundle)

- [Performance-comparison](https://codesandbox.io/s/react-form-library-stress-test-81swz)

## 😍Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):

  

    
Laurens Lavaert
💻

    
Jovi De Croock
🚇 ⚠️ 👀 📖 💻

    
Jonathan Callewaert
🐛

    
Andrew Rempe
💻

    
Corentin Leruth
💻

    
Pavel Ravits
🐛

    
Tegan Churchill
🐛

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!