Simplifying React Forms with Formik

Photo by Jr Korpa

Whisking Away the Complexity

Formik is like that friend who says, "I'll handle the boring stuff; you just show up and have fun!" It takes care of the repetitive and error-prone chores associated with forms, like handling state, validation, and submissions.

Getting Started

Initial setup, you ask? It's as painless as convincing a JavaScript developer that ; are often optional. Just add Formik to your project:

npm install formik --save

Now, that wasn't too bad, was it?

The Magic of <Formik />

With Formik's <Formik /> component, you encapsulate the form's functionality. Props such as initialValues, onSubmit, and validationSchema (for those who like their forms to stay in line) are part of the gig.

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    validationSchema={SignupSchema}
    onSubmit={values => {
      console.log(values);
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field name="email" type="email" />
        {errors.email && touched.email ? (
          <div>{errors.email}</div>
        ) : null}
        <Field name="password" type="password" />
        {errors.password && touched.password ? (
          <div>{errors.password}</div>
        ) : null}
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

Embracing the <Field />

Using <Field /> is simpler than explaining to your grandma why you need to turn it off and on again. Instead of manually hooking up input fields to Formik's state and handlers, you plop a <Field /> in and voilà! You've got data binding, validation, and error messages.

Validation - Keep Those Fields Honest

Anyone who's ever missed a required field knows the sting of validation. Formik is your bouncer, ensuring only the right data makes it past the velvet rope.

const myValidationSchema = Yup.object({
  partyTrick: Yup.string()
    .required("Without this, the form just isn't the same."),
});

Handling Form Submission

Once your user hits that submit button, it's showtime. The onSubmit prop lets you define how to handle the data. Think of it as the stage manager, ensuring that the data knows its cues.

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={(values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  }}
>
  { /* form goes here */ }
</Formik>

Advanced Formik Spells

With great power comes... well, more features that make forms a breeze.

Custom Input Components

Formik isn't picky; it'll work with custom input components faster than a duck on a june bug. Here's a hint on how to charm Formik with your own component:

const MyCustomInput = ({ field, form, ...props }) => {
  return <input {...field} {...props} />;
};

<Field name="customInput" component={MyCustomInput} />

Hook It Up with useFormik

Some folks fancy hooks, some fancy components. If you're the hook-loving kind, useFormik is your jam. It's like <Formik />, but for those who prefer a more ...hooked approach.

import { useFormik } from 'formik';

const formik = useFormik({
  initialValues: {
    username: '',
  },
  onSubmit: values => {
    alert(JSON.stringify(values, null, 2));
  },
});

Final Wisdoms and Chuckles

Remember, though forms might sometimes drive you bananas 🍌, with Formik you'll be the top banana! You can now build and manage your React forms with fewer headaches and more grins. 😉

Embrace the power of Formik and go forth, creating forms that are as delightful to fill as they are to code. And who knows? This could be the beginning of a beautiful friendship between you, your forms, and Formik. Happy coding! 🚀

More like this

Demystifying useEffect: The ReactJS Magician

Imagine you’ve got a magic wand in your React toolkit, ready to cast spells when components mount, update, or unmount. That’s the `useEffect` hook—a charming bit of ReactJS wizardry. In this enchanting article, we'll unravel its mysteries so you can harness its power with finesse.

Read

Mastering Nested State Updates in React

If you've ever wrestled with updating nested state properties in React, you're in the right place. This article dissects this common yet tricky component of React state management, essential for building dynamic applications.

Read

Crafting a Custom Checkbox in React

😊 Are you tired of default checkboxes as much as I am of semicolons mysteriously disappearing from my code? If the answer is "yes", then you're in for a treat! In this article, we dive into creating custom checkbox elements in ReactJS. Why custom checkboxes, you ask? They provide us with the power to unleash our design creativity, improve the user experience, and give our apps that unique flair. As we navigate through the ReactJS landscape, you'll learn the ins and outs of crafting a checkbox that doesn't just tick; it dances to the rhythm of your users' clicks. Expect to find some hearty laughs, a touch of sarcasm, and maybe even a quirky bug to keep you company on this code adventure!

Read

Crafting Custom React Hooks for Your API Adventures

Have you ever felt like you're juggling too much state logic in your React components? Does the mere thought of passing down props through a hoard of components make you shiver? You're not alone! In this little piece of digital parchment, I'll guide you through the enchanted forest of custom React hooks to manage API calls. Not only will this concoct a potion for cleaner components, but it will also bestow upon you the arcane wisdom needed to simplify your React endeavors. Prepare to illuminate the path towards more maintainable and readable code!

Read