Formik + Yup

Description

what is it ? : React libraries to make powerful Forms

• Formik : build Forms
• Yup : hanldes Forms validation

URL : Formik official website (opens in a new tab) | Yup official Repository (opens in a new tab)
versions Respectively :2.2.9 | 0.32.11
Why ? :

• Makes manging multifields Forms (more than 4 Fields) very easy and well structured
• Well documented API.
• Simplifies validation:

Application

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
});