Handling and managing forms in React apps are too much of a hassle. There are many different libraries out there, but they do much more than you actually want. Here comes Formik to the rescue. According to the docs, Formik mainly does 3 things:

Getting values in and out of form state

Validation and error messages

Handling form submission

Cool, And this post is all about telling you how to do these three steps with Formik and also another library (which is in no way related to Formik) called Yup that allows you to perform validation in a very elegant way. And the fun part is that Formik also supports hooks now and works well with render props pattern too.

Install

Let’s first install Formik.

npm install formik // or yarn formik

Tip: By refraining from using external state management libraries, Formik makes your forms more reusable in other projects. This is a great opportunity to leverage Bit (Github) in order to share and reuse your forms between apps, while organizing them for your future self and teammates to use too! 😃

Example: Shared React components in bit.dev

useFormik

Formik provides a hook useFormik that takes in an object with initialValues and onSubmit property, and returns an object which has all the helper methods that you need to manage your form state.

useFormik

Simple, right? This formik object is your toolkit and has all the tools you need to manage your state inside your form. The tools provided are handleSubmit , handleChange , handleBlur and much more. Here is an example of a small form:

Simple Form

Easy, from our toolkit, we extract the two methods and attach them on onSubmit and onChange and we are good.

1. We use only one change handler.

2. All the values in the fields are mapped to the values object by their name .

Formik gets the form values in the values object, which looks like this,

{ firstName: 'Sam', lastName: 'Martin' }

Cool right, let’s add some more fields to it and perform validation using Formik itself.

We can pass another value to our useFormik hook called validate. It is a function that accepts values object and returns an errors object. As per docs,

Formik will validate after each keystroke (change event), each input’s blur event, as well as prior to submission. It will only proceed with executing the onSubmit function we passed to useFormik() if there are no errors (i.e. if our validation function returned {} ).

Form with validation 😃

But still, this validation is not efficient. We would have to write validation logic for each and every field and is too much of a work. And this is when Yup comes into the picture.

What is Yup? Yup is a JavaScript object schema validator and object parser. Let’s plug-in Yup with Formik.

Install

npm install -S yup or yarn add yup

Instead of validate we just have to provide the validationSchema property to useFormik and instead of writing a function we have to specify the acceptable schema for our form.

Validation with Yup

It works entirely the same except instead of writing our own validation logic we can ask yup to do our job.

Formik is much more powerful than this, you can try way more different things than this. Here is the code sandbox for the above code.

<Formik />

As I mentioned earlier, Formik not only works well with hooks but also with render props approach. So if your app doesn’t use hooks, then don’t worry because Formik works without hooks as well.

Let’s do the thing we did with useFormik with <Formik /> .

It is based on the render props approach, and the rest of the things remain the pretty same.

Instead of getting useFormik we’ll get the Formik from formik. And have to wrap our form inside that component, something like this:

<Formik />

And the object we were passing into the hooks becomes props in this case.

Yup

I wanted to talk a bit more about Yup because we haven’t seen what it is really capable of. Let’s look into a bit more complex application of Yup.

const validationSchema = yup.object().shape({ username: yup .string() .max(16) .required(), email: yup .string() .email() .required(), password: yup .string() .min(8) .required(), confirm_password: yup .string() .required() .oneOf( [yup.ref('password'), null], 'Passwords must match', ), })

The username is required and can have a maximum of 16 characters. Email validation is obviously supported using email() . Also, we can check that the password and confirm_password field match, all we have to do is check if the password (get it using ref) matches the confirm_password field.

Conclusion

There is a lot more to Formik as well as Yup. This post is to get you started with it and we have hardly scratched the surface. If you want to learn more then you can checkout docs for both Formik and Yup or you could wait for another post of mine in which I would talk about Formik and Yup advanced use cases.

I hope you liked this article and learned something new and if you did clap your heart out and follow me for more content on Medium and as well as on Twitter. Please feel free to comment and ask anything. Thanks for reading 🙏 💖.

Learn More