How do I integrate Yup schema with React Hook Form?

How do I integrate Yup schema with React Hook Form?

You can integrate Yup with React Hook Form by using the yupResolver from @hookform/resolvers/yup. First, install the necessary packages.

What are the steps to set it up?

1. Install Yup and React Hook Form. 2. Create a Yup schema for your form validation. 3. Use useForm from React Hook Form and pass the schema using yupResolver.

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({
  email: Yup.string().email().required(),
  password: Yup.string().min(6).required(),
});

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

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

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

What if I want to add more fields?

You can simply extend your Yup schema by adding more fields and their validation rules, and then include them in your form.