# @rafaelvfcarvalho/use-form-validation

> React hook to form validation

Latest version **1.0.2** (published 2021-05-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @rafaelvfcarvalho/use-form-validation
pnpm add @rafaelvfcarvalho/use-form-validation
yarn add @rafaelvfcarvalho/use-form-validation
bun add @rafaelvfcarvalho/use-form-validation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-05-14 |
| First published | 2021-05-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rafael Carvalho |
| Maintainers | rafaelvfcarvalho |
| Keywords | react, form, hooks, validation |

## Links

- npm: https://www.npmjs.com/package/@rafaelvfcarvalho/use-form-validation
- npm.io page: https://npm.io/package/@rafaelvfcarvalho/use-form-validation

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

- 1.0.2 (latest) — 2021-05-14
- 1.0.1 — 2021-05-14
- 1.0.0 — 2021-05-14

## README

# use-form-validation

<b>use-form-validation</b> is a react hook that allows validate form easily.

## Installing

```bash
npm install @rafaelvfcarvalho/use-form-validation --save
```

or

```bash
yarn add @rafaelvfcarvalho/use-form-validation
```

## Using

This is an example using Typescript.   

```jsx
import useFormValidation from '@rafaelvfcarvalho/use-form-validation';
import { useEffect, useRef } from 'react';
import * as yup from 'yup';

export default function Form() {
  const { errors, registry } = useFormValidation();

  const name = useRef<HTMLInputElement>(null);
  const email = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const formSchema = yup.object().shape({
      name: yup.string().required('Name Required').min(7, 'Name must have at least 7 characters'),
      email: yup.string().required('Email required').email('Type a valid email'),
    })

    registry(formSchema, [name, email])
  }, [])

  return (
    <form>
        <input type="text" name="name" ref={name} />
        <span>{errors.name}</span>
        <input type="text" name="email" ref={email} />
        <span>{errors.email}</span>
    </form>
  );
}
```

## Show Your Support

If you enjoyed this project, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support.
Feel free to give feedback and make a pull request.

## Maintainers

<table>
  <tbody>
    <tr>
      <td align="center">
        <a href="https://github.com/carvalho-rafael">
          <img width="150" height="150" src="https://avatars.githubusercontent.com/carvalho-rafael">
          </br>
          Rafael Carvalho:
          </br>
          Github
        </a>
        <div>
          <a href="https://www.instagram.com/desenvolvedor.jr/">
            Instagram
          </a>
        </div>
      </td>
    </tr>
  <tbody>
</table>

[github-star-badge]: https://img.shields.io/github/stars/carvalho-rafael/use-form-validation.svg?style=social
[github-star]: https://github.com/carvalho-rafael/use-form-validation/stargazers

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