react-form
Version:
⚛️ 💼 React hooks for managing form state and lifecycle
168 lines (152 loc) • 6.72 kB
Markdown

<img src='https://github.com/tannerlinsley/react-form/raw/master/media/logo.png' width='300'/>
Hooks for managing form state and validation in React
<a href="https://travis-ci.org/tannerlinsley/react-form" target="\_parent">
<img alt="" src="https://travis-ci.org/tannerlinsley/react-form.svg?branch=master" />
</a>
<a href="https://npmjs.com/package/react-form" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/react-form.svg" />
</a>
<a href="https://bundlephobia.com/result?p=react-form@next" target="\_parent">
<img alt="" src="https://badgen.net/bundlephobia/minzip/react-form@next" />
</a>
<a href="https://spectrum.chat/react-form">
<img alt="Join the community on Spectrum" src="https://withspectrum.github.io/badge/badge.svg" />
</a>
<a href="https://github.com/tannerlinsley/react-form" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-form.svg?style=social&label=Star" />
</a>
<a href="https://twitter.com/tannerlinsley" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>
<br />
<br />
<a href="https://patreon.com/tannerlinsley">
<img width="180" alt="" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/become-a-patron.png" />
</a>
## Features
- Built **with** React hooks **for** React hooks
- Highly practical validation API with 1st-class asynchronous support
- Built-in validation debouncing with auto cancellation for stale validations
- Field Scoping for deeply nested form values
- No nonsense meta management for both forms and form fields
- Fully memoized for frequent and fast rerenders
- Flexible form API at the field, scope, and form levels
# Documentation
- [Installation](./docs/installation.md)
- [Examples](./docs/examples.md)
- [API](./docs/api.md)
- [Validation Guide](./docs/validation.md)
- [Field Scoping Guide](./docs/field-scoping.md)
## Sponsors
**React Form** is built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon for React Form or my other open source libraries, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley)
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width='200' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="250" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum-placeholder.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="250" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum-placeholder.png">
</a>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width='200' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="150" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="150" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
</a>
</td>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="150" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
</a>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width='200' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="100" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="100" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="100" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://patreon.com/tannerlinsley" target="_blank">
<img width="100" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
</a>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td valign="top">
<a href="https://patreon.com/tannerlinsley">
<img width='200' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/supporters.png" />
</a>
</td>
<td>
<div><a href="https://patreon.com/tannerlinsley">Your Name and Link Here!</a></div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td valign="top">
<a href="https://patreon.com/tannerlinsley">
<img width='200' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/fans.png" />
</a>
</td>
<td>
<div><a href="https://patreon.com/tannerlinsley">Your Name Here!</a></div>
</td>
</tr>
</tbody>
</table>
<a href="https://patreon.com/tannerlinsley">
<img width="150" alt="" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/become-a-patron.png" />
</a>