React forms with formik

Without a doubt, react forms can be sometimes complicated. Thankfully, formik is designed to make your job easy. With formik, forms in react will be easy. Plus it will help improve the performance of your application.

One thing we love about Formik is that it makes use of react component state to store form values.

To use formik, you’ll need to install formik in your application using npm or yarn.

Now to use formik, anywhere in your app, you can use the code below:

import { Formik } from 'formik';

Lets look into an example

import React from 'react';
import { Formik } from 'formik';

const Example = () => (
  <div>
    <h1>Anywhere in your app!</h1>
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

Lets understand the above code.

what the <Formik /> component does basically is take initialValues and validate onSubmit as props.

intialValues props helps to define an Object that are in the form’s initial value for forms input. This is especially important when the form is rendered.

validate prop is a function that checks if the value for the input field is valid before submission. it returns an Object with errors for the fields.

onSubmit prop is a function that does whatever needs to be done when the form is submitted.

The children to the Formik component can also be passed to the render prop of the component.

Formik also has its own components for Field, Form and ErrorMessage. These components can replace <input /> and <form />.

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

Validation

Although, you can use built-in HTML validations like required, maxlength, minlength or pattern props along with formik. It has its limitations and is only bound to browsers. But with formik, it is easy. You just just create a validate function for it or define a validationSchema.
As formik stores the values the for each field, you can just check the values object and return the errors object from the validate function. And it avalaible as props.

Visited fields

Formik also maintains if a field in the form is visited previously. It stores that information in the touched object. you can use it for showing validation errors, only if the field is touched or visited before. to use the touched object, you need to pass the formik.handleBlur to onBlur prop for all the fields as shown in example above.