DEV Community

Duc Ng
Duc Ng

Posted on • Updated on

What is easier than Formik?

Formik is a React form package that lets you work with Form easily. It's tag line is "Build forms in React, without the tears".

From the experience, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:

  • Setting & getting values in and out of form state
  • Validation and error messages
  • Handling form submission

By colocating all of the above in one place, Formik will keep things organized--making testing, refactoring, and reasoning about your forms a breeze.

To build a form with Formik, there is an example looks like this:

        firstName: '',
        lastName: '',
        email: '',
      onSubmit={(values: Values, { setSubmitting }: FormikActions<Values>) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500);
Enter fullscreen mode Exit fullscreen mode

"renderForm" is a typical function that renders a Form you see everywhere like in HTML, React, etc. like this:

          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" placeholder="Jane" type="text" />


          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" placeholder="Doe" type="text" />

          <label htmlFor="email">Email</label>
          <Field name="email" placeholder="" type="email" />
          <ErrorMessage name="email" component="div" className="field-error" />

          <button type="submit">Submit</button>
          <Debug />
Enter fullscreen mode Exit fullscreen mode

Let's come back to the question: What is easier than Formik? I think the simplest way to describe a Form is ...English. Typically we say like this: "I need a Form, with a Field has this label & a submit Button", we don't talk in JSX :) So, with that in mind, I created ui-form-field to help me build a Form easily like:


Not just shorter syntax, it's also offering:

Easy Flexible Consistent Fast Layouts Themes More Types

  • Formik is easy, ez-react-form (ui-form-field) is ...easier, duh ¯_(ツ)_/¯
  • Simplified Formik but will not stand in your way. You are free to follow Formik at any point.
  • Consistent rendering, stylings (for big projects)

And more:

  • Layouts (vertical, horizontal)
  • Work with different CSS Frameworks / Form Layouts (tentcss (default), bootstrap, spectre, etc.)
  • Use FastField to avoid too many re-renders.
  • More types of fields.

So, check it out ui-form-field and lend me a hand if you have any idea or feedback. Thanks!

Top comments (4)

nathansebhastian profile image
Nathan Sebhastian

Looks pretty good. I'm working on a project with complicated forms, I'll give it a try. Thanks for sharing.

ngduc profile image
Duc Ng

Hi Nathan,
I've updated it here (new link) with more features:

bluebill1049 profile image

Check out react-hook-form, I think it's pretty simple to use too

ngduc profile image
Duc Ng

Renamed project to -