How do I integrate Yup with Formik for form validation?

How do I integrate Yup with Formik for form validation?

You can integrate Yup with Formik by using the validationSchema prop in your Formik component. First, install Yup if you haven't already.

What does the validationSchema look like?

The validationSchema is a Yup object schema that defines the validation rules for your form fields. For example:

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

Can you show me a complete example?

Sure! Here's a simple example:

import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    validationSchema={validationSchema}
    onSubmit={values => { console.log(values); }}
  >
    {() => (
      <Form>
        <Field name="email" type="email" />
        <ErrorMessage name="email" component="div" />
        <Field name="password" type="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

What if I want to add more fields?

You can easily add more fields by extending the initialValues and updating the validationSchema accordingly. Just follow the same pattern!