# @jasperdunn/react-form-hooks > Flexible agnostic functions to help you build forms in React Latest version **6.0.3** (published 2021-05-14) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @jasperdunn/react-form-hooks pnpm add @jasperdunn/react-form-hooks yarn add @jasperdunn/react-form-hooks bun add @jasperdunn/react-form-hooks ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 6.0.3 | | Published | 2021-05-14 | | First published | 2019-03-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=8 | | Dependencies | 0 | | Unpacked size | 94.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | jasperdunn | | Maintainers | jasperdunn | | Keywords | react, hooks, react-hooks, form, form-validation, validation, agnostic, controlled-components | ## Links - npm: https://www.npmjs.com/package/@jasperdunn/react-form-hooks - Repository: https://github.com/jasperdunn/react-form-hooks - Homepage: https://jasperdunn.github.io/react-form-hooks/ - npm.io page: https://npm.io/package/@jasperdunn/react-form-hooks ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 6.0.3 (latest) — 2021-05-14 - 6.0.2 — 2021-02-23 - 6.0.1 — 2021-02-18 - 6.0.0 — 2021-02-18 - 5.1.3 — 2020-10-27 - 5.1.2 — 2020-08-26 - 5.1.1 — 2020-04-25 - 5.1.0 — 2020-04-25 - 5.0.5 — 2020-04-25 - 5.0.4 — 2020-04-25 - 5.0.3 — 2020-04-25 - 5.0.2 — 2020-04-23 - 5.0.1 — 2020-04-12 - 5.0.0 — 2020-04-11 - 4.3.1 — 2019-08-30 - … 22 more at https://npm.io/package/@jasperdunn/react-form-hooks/versions ## README # React Form Hooks ## Flexible agnostic functions to help you build forms in React [![npm version](https://img.shields.io/npm/v/@jasperdunn/react-form-hooks.svg?color=%232c8ebb&style=flat-square)](https://www.npmjs.com/package/@jasperdunn/react-form-hooks) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@jasperdunn/react-form-hooks.svg?color=rgb%28113%2C%20138%2C%20240%29&label=gzipped&style=flat-square) [![MIT license](https://img.shields.io/npm/l/@jasperdunn/react-form-hooks.svg?color=%233DA639&style=flat-square)](http://opensource.org/licenses/MIT) [![coverage status](https://img.shields.io/coveralls/github/jasperdunn/react-form-hooks.svg?style=flat-square)](https://coveralls.io/github/jasperdunn/react-form-hooks?branch=master) [![travis](https://img.shields.io/travis/jasperdunn/react-form-hooks.svg?style=flat-square)](https://travis-ci.org/jasperdunn/react-form-hooks) `yarn add @jasperdunn/react-form-hooks` Try out a simple [form](https://jasperdunn.github.io/react-form-hooks/) Play in a [sandbox](https://codesandbox.io/s/937p7o6plp) See the [changelog](https://github.com/jasperdunn/react-form-hooks/blob/master/CHANGELOG.md) ## Why I started the project After discovering the freedom and power of React hooks, I wanted to create a flexible suite of functions that can help create forms with whichever components we want, however we want! There are many excellent react form packages out there, however I hadn't yet found one that didn't end up pulling me in a certain direction or way of working. I wanted to be able to use simple, stateless, controlled components in my forms, utilizing agnostic functions that didn't care which components I used or how they were structured. ## What it looks like > JSX components not included. ``` import { useFormValues, useFormErrors } from "@jasperdunn/react-form-hooks" export default function MyForm() { const { formValues, setInputValue } = useFormValues({ email: '', password: '' }) const { formErrors, validateForm } = useFormErrors({ email: [required, email], password: [required, alphanumeric, value => minLength(value, 6)], }) return (
submit(event, validateForm, formValues, formErrors)} >

Form with hooks

) } ``` ## useFormValues ``` const { formValues, resetFormValues, resetInputValue, setInputValue, setFormValues } = useFormValues(initialState) ``` Where - `formValues` - Object where each key is the input name and each value is the input value. - `resetFormValues` - Function that resets the form values to the initial state. - `resetInputValue(name)` - Function that resets the input value to it's initial state. - `setInputValue(input, value?)` - Function that updates an input value via an event handler or passing the new value and the input's name. - `setFormValues(formValues)` - Function that updates the form values. ## useFormErrors ``` const { formErrors, numberOfErrors, validateForm, validateInputValue, clearFormErrors, clearInputError, setInputError } = useFormErrors(formValidations) ``` Where - `formErrors` - Object where each key is the form input name, and each value is an error message (string/jsx). - `numberOfErrors` - Number of inputs that have errors. - `validateForm` - Function that runs validation on the whole form, returns formIsValid (boolean). - `validateInputValue(input, value?)` - Function that runs validation on an input, returns inputIsValid (boolean). - `clearFormErrors` - Function that clears the form errors. - `clearInputError(input)` - Function that clears the error for an input via an event handler or the input's name. - `setInputError(name, error)` - Function that sets the error for an input. ### formValidations ``` const formValidations = { formInputName: [array, of, validation, functions] } ``` - `formValidations` Where each key is the form input name, and the value is an array of validation functions for that form input. Each validation function must return a string as the error message or have no return value (undefined). ## License MIT © [jasperdunn](https://github.com/jasperdunn) --- This package is created using [create-react-hook](https://github.com/hermanya/create-react-hook). --- _Source: https://npm.io/package/@jasperdunn/react-form-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._