--- title: "Best ReactJS Form library" description: "As our application gets bigger and more complicated, it can be worth to look a third-party library.  React third-party libraries helps you to reduce boilerplate, standardize our code, and simplify..." url: https://blog.codedthemes.com/reactjs-form-library/ date: 2021-03-03 modified: 2024-12-05 author: "Ankita Nathani" image: https://blog.codedthemes.com/wp-content/uploads/2021/03/Codedthemes-Blog-2.png categories: ["Web Development"] type: post lang: en --- # Best ReactJS Form library As our application gets bigger and more complicated, it can be worth to look a third-party library.  React third-party libraries helps you to reduce boilerplate, standardize our code, and simplify complex problems. Most React applications contain forms. Forms are used to collect data for processing from users. If you are building a React application that contains one or more forms.  If you work with React, you know that it provides a way to handle forms using controlled components. However, it can become tedious with a lot of repetitive code if you build a lot of forms, and you may want to also validate and keep track of the visited fields or form state. To solve this problem a form library is used that helps easy to build forms of varying complexity, with validation and state management. ## **Why we need ReactJS form library?** A library is used to make development work easier. If you are writing repetitive code with complex validation logic, think about installing the form library. If the most complex form in your application is your login or registration form, then you probably don’t need to use a third-party form library. **In this article, we will find some best react form the library, which you can use.** ## **Formik** !(https://blog.codedthemes.com/wp-content/uploads/2021/03/formik.png) (https://formik.org/) is one of the most popular form libraries in react. It allows you to easily build complex forms, and it works nicely with yup validation. Formik helps you with managing the form state, handling submission, formatting, and validating form values. It’s also quite small in size. It is 13.1 kB when gzipped and minified, with support for TypeScript, and works with React Native. !(https://blog.codedthemes.com/wp-content/uploads/2021/03/Best-React-forms-Libraries-in-2021-Openbase-1.png) **Here is a code for writing a form to collect user data with Formik:** ``` import { Formik, Form, Field, ErrorMessage } from "formik"; const DataForm = () => ( # Your Data { const errors = {}; if (!values.name) { errors.name = "Required"; } if (!values.acceptedTerms) { errors.acceptedTerms = "You must accept the terms and conditions before you proceed."; } if (!values.email) { errors.email = "Required"; } else if ( !/^+@+\.{2,}$/i.test(values.email) ) { errors.email = "Invalid email address"; } return errors; }} onSubmit={(values, { setSubmitting }) => { // post data to server alert(JSON.stringify(values, null, 2)); setSubmitting(false); }} > {({ isSubmitting, dirty, handleReset }) => ( Name Email Accept terms ** Reset Submit )} ); export default DataForm; ``` Formik comes with components that make it easier to manage the form state and then expose the form data via props. You wrap the form with the component and pass it props. > One of the best things about formic is its code is simple, it’s easy to manually manipulate other field values. ## React hook form !(https://blog.codedthemes.com/wp-content/uploads/2021/03/hook.png) As the name suggests it was built post (https://formik.org/) release and is really optimize form them and written in typescript,  it will also make you write a little less code than the other two libraries especially for validation which is always a good thing. !(https://blog.codedthemes.com/wp-content/uploads/2021/03/Best-React-forms-Libraries-in-2021-Openbase.png) It is a flexible library that embraces the hooks API and uncontrolled components. It is open source and has 17.3k GitHub stars, and it’s 9.1kB when gzipped and minified. It supports typescript and react native, but unlike the others, there’s no component to wrap your form. You will use the useForm hook it provides to access form state. Let’s look at an example. ``` import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, errors, reset, formState } = useForm(); const { isDirty, isSubmitting } = formState; const onSubmit = (data) => alert(JSON.stringify(data, null, 2)); return ( # Your Data Name {errors.name?.message} Email {errors.email?.message} Accept Terms {errors.acceptedTerms && You must accepet the terms} Reset ); } ``` To use this library call the useform() hook which will return objects and functions to manage the form state. The handleSubmit function will be called when the form is submitting. It accepts two functions as arguments: the first one will be called with the form data if the form validation is successful, and the second one will be called when the validation fails. The register function allows you to register an input/select element Ref and supply validation rules as well. You can specify the error message for a validation rule when it is defined or skip it. you can install the @hookform/error-message package. With it, you can use it to display the error message for name and email as follows: ``` import { ErrorMessage } from "@hookform/error-message"; // other necessary code ... {message} } /> ``` ## React-Final-Form** !(https://blog.codedthemes.com/wp-content/uploads/2021/03/React-Final-Form.png) (https://final-form.org/react) is a subscription-based form state management library based on Final Form. It is built by the same author as redux form. It uses the Observer pattern so that only the components that need updating are re-rendered as the form’s state changes. By default, it subscribes to all changes, but if you want to optimize for blazing-fast perfection, you may specify only the form state that you care about. !(https://blog.codedthemes.com/wp-content/uploads/2021/03/Best-React-forms-Libraries-in-2021-Openbase-2.png) Let’s look at the syntax for using Final Form. ``` import { Form, Field } from "react-final-form"; const DataForm = () => ( # Your Data alert(JSON.stringify(values, 0, 2))} initialValues={{ acceptedTerms: true }} validate={(values) => { const errors = {}; if (!values.name) { errors.name = "Required"; } if (!values.acceptedTerms) { errors.acceptedTerms = "You must accept the terms and conditions before you proceed."; } if (!values.email) { errors.email = "Required"; } else if ( !/^+@+\.{2,}$/i.test(values.email) ) { errors.email = "Invalid email address"; } return errors; }} render={({ handleSubmit, form, submitting, pristine, values, errors, touched, }) => ( {({ input, meta }) => ( Username {meta.error && meta.touched && {meta.error}} )} Twitter Handle {({ input, meta }) => ( Email {meta.error && meta.touched && {meta.error}} )} Accept Terms {touched.acceptedTerms && errors.acceptedTerms && ( {errors.acceptedTerms} )} ** Reset Submit )} /> ); export default DataForm; ``` react form uses two components 1)
2) The component is a wrapper over the HTML form and it manages the form state and events. You can set initial values to use for initializing the form state, the submit handler and validate prop for form-level validation. [!(https://blog.codedthemes.com/wp-content/uploads/2024/06/Banner-4.png)](https://codedthemes.com/item/category/templates/react-templates/) You can also do field-level validation bypassing validation props to the component. The component registers a field with the form, subscribes to the field state, and injects both field state and callback functions (onBlur, onChange, and onFocus) via rendering prop. The component registers a field with the form, subscribes to the field state, and injects both field state and callback functions (onBlur, onChange, and onFocus) via rendering prop. It is maintained by Erik Rasmussen, who also built Redux Form. It is open source and has 6.3k GitHub stars, weighing 3.2 kB when gzipped and modified, plus 5.4 kB gzipped for Final Form. Unlike Formik and React Hook Form, it doesn’t have an component. However, you can easily build one that can be reused in your project using the useField hook.** ``` import { useField } from "react-final-form"; const ErrorMessage = ({ name }) => { const { meta: { error, touched }, } = useField(name, { subscription: { error: true, touched: true } }); return error && touched ? {error} : null; }; ``` ## Conclusion Every react form library listed is fast and helps you build and manage complex forms. Any of the libraries you choose must be useful in your project. **Check more articles –** - (https://blog.codedthemes.com/top-5-react-hook-library-for-developer/) - A Glimpse of React 18 Share this:[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Freactjs-form-library%2F&linkname=Best%20ReactJS%20Form%20library)[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Freactjs-form-library%2F&linkname=Best%20ReactJS%20Form%20library)[](https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Freactjs-form-library%2F&linkname=Best%20ReactJS%20Form%20library)[](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Freactjs-form-library%2F&linkname=Best%20ReactJS%20Form%20library)[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Freactjs-form-library%2F&linkname=Best%20ReactJS%20Form%20library)