Reusing schemas in Yup

September 03, 2020

Instead of rewriting Yup schemas from scratch start with a base schema and extend it

Use the object.shape() to add fields to a Yup object. A schema is returned.

import * as Yup from 'yup';

export const baseSchema = Yup.object({
    firstName: Yup.string().required("Required"),
    lastName: Yup.string().required("Required"),
    addressOne: Yup.string().required("Required"),
    addressTwo: Yup.string(),
    municipality: Yup.string().required("Required"),
    provinceTerritory: Yup.string().required("Required"),
    postalCode: Yup.string().trim()
        .required("Required")
        .matches(/^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/,
            { message: "Postal Code must be in format: K4B 1H9" })
});

const extendedSchema = baseSchema.shape({
        email: Yup.string().trim().required("Required").email(),
        shipping: Yup.string().required("Required")
    })

Yup is a schema validation package that works well with Formik—a React forms library

npm install --save yup

References: