# react-form

> ⚛️ 💼 React hooks for managing form state and lifecycle

Latest version **4.0.1** (published 2019-11-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-form
pnpm add react-form
yarn add react-form
bun add react-form
```

## Health

**Score 43/100 (D)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2019-11-11 |
| First published | 2014-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-form) |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 186.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6697 |
| Author | tannerlinsley |
| Maintainers | joepuzzo, tannerlinsley |

## Links

- npm: https://www.npmjs.com/package/react-form
- Repository: https://github.com/tannerlinsley/react-form
- npm.io page: https://npm.io/package/react-form

## Recent versions

- 4.0.1 (latest) — 2019-11-11
- 4.0.0-alpha.8 (next) — 2019-09-17
- 3.0.0-beta.5 (beta) — 2018-02-22
- 4.0.0 — 2019-11-11
- 4.0.0-alpha.14 — 2019-09-24
- 4.0.0-alpha.13 — 2019-09-24
- 4.0.0-alpha.12 — 2019-09-24
- 4.0.0-alpha.11 — 2019-09-24
- 4.0.0-alpha.10 — 2019-09-23
- 4.0.0-alpha.9 — 2019-09-23
- 4.0.0-alpha.7 — 2019-09-17
- 4.0.0-alpha.6 — 2019-09-17
- 4.0.0-alpha.5 — 2019-09-16
- 4.0.0-alpha.4 — 2019-09-16
- 4.0.0-alpha.3 — 2019-09-16
- … 107 more at https://npm.io/package/react-form/versions

## README

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

---
_Source: https://npm.io/package/react-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._