use-form-validation

use-form-validation is a react hook that allows validate form easily.

Installing

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

or

yarn add @rafaelvfcarvalho/use-form-validation

Using

This is an example using Typescript.

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 the repo to show your support. Feel free to give feedback and make a pull request.

Maintainers