Validation hook for React Hook Form with Joi

App.tsx

import { useState } from 'react';
import useValidation from './hooks/useValidation';
import Joi from 'joi';

const schema = Joi.object({
  email: Joi.string()
    .email({ tlds: { allow: false } })
    .required(),
  password: Joi.string().min(8).required(),
});

const App = () => {
  const [loading, setLoading] = useState(false);
  const { register, onSubmit, onReset, errors } = useValidation(
    schema,
    (data) => {
      setLoading(true);
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(data);
        }, 2000);
      })
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.error(error);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  );

  return (
    <>
      <form onSubmit={onSubmit} onReset={onReset}>
        <input
          placeholder='Enter your email'
          type='email'
          {...register('email')}
        />
        <small>{errors?.email?.message}</small>

        <input
          type='password'
          placeholder='Enter your password'
          {...register('password')}
        />
        <small>{errors?.password?.message}</small>

        <button type='submit' disabled={loading}>
          Sign in
        </button>
        <button type='reset' disabled={loading}>
          Reset
        </button>
      </form>
    </>
  );
};

export default App;

useValidation.ts

import { FormEvent } from 'react';
import {
  useForm,
  FieldErrors,
  SubmitHandler,
  UseFormRegister,
} from 'react-hook-form';
import { joiResolver } from '@hookform/resolvers/joi';
import { ObjectSchema } from 'joi';

export interface UseValidationReturn<T> {
  register: UseFormRegister<T>;
  onSubmit: (e: FormEvent) => Promise<void>;
  onReset: (e: FormEvent) => void;
  errors: FieldErrors;
}

const useValidation = <T>(
  schema: ObjectSchema<T>,
  callback: SubmitHandler<T>
): UseValidationReturn<T> => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<T>({ resolver: joiResolver(schema) });

  const onSubmit = handleSubmit(callback);
  const onReset = (e: FormEvent) => {
    e.preventDefault();
    reset();
  };

  return {
    register,
    onSubmit,
    onReset,
    errors,
  };
};

export default useValidation;