React forms: Formik and Yup intro

Introduction

React forms are difficult. Organizing all events for different input fields around the React lifecycle can be complex. But there is Formik. One of the very good libraries that helps with this problem, and in the rest of this post, I will cover the basics of what Formik gives us. As a bonus, there will be a few details on another amazing library that is often used in combination with Formik, Yup.

Formik

If you worked with react forms before, you might remember how complex it was to incorporate all the needed functionality. Mess between value, default value, blur, and change handler, and then select elements. Then on top, you have to validate and bind all the values to the state. It was a mess. Formik makes this task easier by providing us with many needed components and functions out of the, but with enough flexibility to add custom stuff. All you need to do to start using it is install it with one simple command:

npm install -S formik

From this point, everything is quite straightforward. You import the Form component, give it the required props and everything inside is under the Formik. There are plenty of different props and other components you can check in the documentation. Props that declare validation of the form, initial values, or different handlers like onSubmit which triggers once you submit your form. An example of it is below.

import { Formik, Form, Field, ErrorMessage } from 'formik';

 const ExampleForm = () => (
   <div>
     <Formik
       initialValues={{ firstName: '', lastName: '' }}
       validate={values => {
         const errors = {};
         if (!values.firstName) {
           errors.firstName = 'Required';
         }
         if (!values.lastName) {
           errors.lastName = 'Required';
         }
         return errors;
       }}
       onSubmit={(values, { setSubmitting }) => {
         setTimeout(() => {
           alert(JSON.stringify(values, null, 2));
           setSubmitting(false);
         }, 400);
       }}
     >
       {({ isSubmitting }) => (
         <Form>
           <Field type="text" name="firstName" />
           <ErrorMessage name="firstName" component="div" />
           <Field type="text" name="lastName" />
           <ErrorMessage name="lastName" component="div" />
           <button type="submit" disabled={isSubmitting}>
             Submit
           </button>
         </Form>
       )}
     </Formik>
   </div>
 );

 export default ExampleForm;

Code organization and useFormikContext hook

In this post, I will not go deep into all the props and components of the Formik. That would be a much longer post. But one that I will mention is the useFormikContext hook.
Forms can grow very large and complex. And you might wish to split it into smaller components. Passing all the values and functions down the tree might be too messy. That is why there is the useFormikContext hook. If you call this hook anywhere inside of the form, you will get access to all the formic values and methods.

Yup and validation schema

Yup is another library and it is used to parse and validate the value. You define the schema of the value, and then use it to match or validate its correctness on the client side. It is very expressive and easy to use. All you need to start is to install it.

npm install -S yup

So where does this library come to use with the Formik? As mentioned before, one of the props for Formik is the validation function. But writing those functions can be a bit tedious job? With the complexity of the form, the complexity of such function grows. That is why there is another prop you could use called validationSchema and as value for it, you can pass yup schema object.

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

const validationSchema = yup.object().shape({
    firstName: yup.string().required('Required'),
    lastName: yup.string().required('Required')
});

const ExampleForm = () => (
    <div>
        <Formik
        initialValues={{ firstName: '', lastName: '' }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
            }, 400);
        }}
        >
        {({ isSubmitting }) => (
            <Form>
            <Field type="text" name="firstName" />
            <ErrorMessage name="firstName" component="div" />
            <Field type="text" name="lastName" />
            <ErrorMessage name="lastName" component="div" />
            <button type="submit" disabled={isSubmitting}>
                Submit
            </button>
            </Form>
        )}
        </Formik>
    </div>
);

export default ExampleForm;

Wrap up

Both Formik and Yup are amazing libraries and are quite commonly used with React forms. However, I often see less experienced members not being aware of them, or more importantly, using them without knowing what they do. I do hope you got the idea of it from this introduction post and that with it you can be more comfortable around React forms.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.