Category Archives: front-end

Forms in React & Other best Form libraries you might need

Before diving into different Form Libraries in React/Redux, please lets first understand Forms in React.

Forms with controlled components

 

Well, In most cases, React officially recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component itself using setState(). Thus you need to write an event handler for every way your data can change and pipe all of the inputs into React component.

Examples-

Forms with uncontrolled components

Sometimes it can be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component.

First of all now understand what is uncontrolled components where in you can use a ref to get form values from the DOM. Where form data is handled by the DOM itself.

So here are some reasons to use Forms with uncontrolled components –

  • Integrating a React application with a non-React library.
  • Converting a preexisting codebase to React
  • Managing state will be tedious

Examples-

Form Libraries

Now lets dive into some other best Libraries which you might want to use. Here are some curated libraries by popularity.

 

 

Although there are many such libraries we restrict ourselves to comparing two of the most commonly used libraries Formik and Redux Form.

Well, if you want to have more detailed comparison of mentioned libraries, you can read it over here.

Over the time i am working on redux projects. Hence i always prefer to Redux Form.

Additionally for validation part you can prefer to use validator.js (A library of string validators and sanitizers). It will be great choice for validating string fields and still you can write your own custom validators as well.

In following section will create an sample Settings page with Form having different settings using Redux Form. So files will be —

  • form-helper.js — Having HOC to render input field with Label & Error messages, different validators such as Email/Required.
  • SettingsForm.js — Actual Form, Just like a dump component
  • SettingsPage.js — Parent component for SettingsForm which will handle Form submission

Code in Action –

 

.form-error {
  color: #ff0000;
}

Thats it!

Still which library you have to use depends on Customisations /complexity/easy to create/easy to validate/Non react library and so on. So choose wisely before selecting one with many stars.

If you think this is a good read, don’t forget to give me a 👏 also don’t forget to share this article with others.

Advertisements