loading...

What is easier than Formik?

ngduc profile image Duc Ng Updated on ・2 min read

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:

<Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      onSubmit={(values: Values, { setSubmitting }: FormikActions<Values>) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 500);
      }}
      render={this.renderForm}
    />    

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

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

          <ErrorMessage
            name="firstName"
            component="div"
            className="field-error"
          />

          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" placeholder="Doe" type="text" />
          <ErrorMessage
            name="lastName"
            component="div"
            className="field-error"
          />

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

          <button type="submit">Submit</button>
          <Debug />
        </Form>

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:

ui-form-field

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!

Posted on Oct 25 '18 by:

ngduc profile

Duc Ng

@ngduc

JS enthusiast / 15y tinkering with screens & code.

Discussion

markdown guide
 

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

 

Hi Nathan,
I've updated it here (new link) with more features:
github.com/ngduc/ez-react-form

 

Check out react-hook-form, I think it's pretty simple to use too github.com/react-hook-form/react-h...