React tutorial adding react formik validation in react typescript project

In this article i will explain you how you can use formik and yup for validation of your form in react typescript project

Step 1: Create React typescript project

Create react typescript project or you can skip this step if you wanted to use formik and yup validation in to your existing project

npx create-react-app my-app --template typescript

Step 2: Install formik and yup in your project

Use the following command to install formik and yup

npm install --save formik yup

Step 3: Choose any form where you wanted to add the formik validation i will give you an example of login form

//Here we have imported the required package yup and formik npm package
import React from "react";
import { withFormik, FormikProps } from "formik";
import * as Yup from "yup";

/**
 * Required interface types declared for yup and formik
 * */
interface FormValues {
  email: string;
  password: string;
}

interface OtherProps {
  title?: string;
  ref?: any;
}

interface MyFormProps {
  initialEmail?: string;
  initialPassword?: string;
  login?: any;
}

/** *
 * This is the form where we will be defining out inputs and other field and checking validation
 * */

const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
  const {
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    isSubmitting,
    ref,
  } = props;

  return (
    <React.Fragment>
      <main className="form-signin">
        <form onSubmit={handleSubmit}>
          <div className="form-floating">
            <input
              type="email"
              className="form-control"
              name="email"
              id="floatingInput"
              placeholder="name@example.com"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            <label htmlFor="floatingInput">Email address</label>
          </div>
          {touched.email && errors.email && (
            <div style={{ display: "auto" }} className="invalid-feedback">
              {errors.email}
            </div>
          )}

          <div className="form-floating mt-3">
            <input
              type="password"
              className="form-control"
              name="password"
              id="floatingPassword"
              placeholder="Password"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            <label htmlFor="floatingPassword">Password</label>
          </div>
          {touched.password && errors.password && (
            <div style={{ display: "auto" }} className="invalid-feedback">
              {errors.password}
            </div>
          )}

          <div className="checkbox mb-3 mt-3">
            <label>
              <input
                name="remember"
                type="checkbox"
                defaultValue="remember-me"
              />{" "}
              Remember me
            </label>
          </div>
          <button
            disabled={
              isSubmitting ||
              !!(errors.email && touched.email) ||
              !!(errors.password && touched.password)
            }
            className="w-100 btn btn-lg btn-warning"
            type="submit"
          >
            Sign in
          </button>
        </form>
      </main>
    </React.Fragment>
  );
};

//This is the LoginForm component where we are executing main logic after form validation and
//also act as high order component for our InnerForm component
const LoginForm = withFormik<MyFormProps, FormValues>({
  mapPropsToValues: (props) => ({
    email: props.initialEmail || "",
    password: props.initialPassword || "",
  }),

  validationSchema: Yup.object().shape({
    email: Yup.string().email("Email not valid").required("Email is required"),
    password: Yup.string().required("Password is required"),
  }),

  handleSubmit(
    { email, password }: FormValues,
    { props, setSubmitting, setErrors }: any
  ) {
       console.log("Email", email);
       console.log("Password", password);
    },
})(InnerForm);


//This is the login component which we will be exporting as default and we will be calling our login Form component
const Login: React.FC<{}> = (props: any) => {
    return(
      <div>
         <LoginForm/>
      </div>
    )
}

export default Login;