react-form/README.md

⚛️ 💼 React hooks for managing form state and lifecycle

![React Form Header](https://github.com/tannerlinsley/react-form/raw/master/media/header.png)

<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>