What is easier than Formik?

#javascript #react #webdev

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:

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!