How can I use Yup for validation in React Hook Form?

How can I use Yup for validation in React Hook Form?

You can integrate Yup with React Hook Form by using the resolver from @hookform/resolvers/yup. This allows you to validate your form data easily.

Can you show me a code example?

Sure! Here's a simple example:

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';

const schema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Email is invalid').required('Email is required'),
});

const MyForm = () => {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="name" ref={register} />
      {errors.name && <p>{errors.name.message}</p>}
      <input name="email" ref={register} />
      {errors.email && <p>{errors.email.message}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

This code sets up a form with validation using Yup.

What if I want to add more fields?

You can easily add more fields by extending the Yup schema and adding corresponding input fields in your form. Just make sure to register each new field with register.