Building forms in React can be straightforward or complex, depending on the requirements. The choice of a form library plays a crucial role in the development process. Below are five of the top React form libraries, each offering unique features to help you create powerful and efficient forms. Wrapixel.com also uses these libraries in their popular react templates.
1. Formik
Formik is one of the most popular React form libraries. It is known for its simplicity and flexibility in managing form state, validation, and submission. Formik also integrates well with validation schemas like Yup, making it a go-to choice for developers who want a straightforward solution.
Key Features:
- Declarative and simple API
- Integration with Yup for schema-based validation
- Minimal bundle size
- Supports asynchronous validation
- Easy integration with third-party components
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const AdminMartLogin = () => {
const initialValues = {
email: '',
password: '',
};
const validationSchema = Yup.object({
email: Yup.string().email('Invalid email format').required('Required'),
password: Yup.string().required('Required'),
});
const onSubmit = (values) => {
console.log('Form data', values);
};
return (
<div className="login-container">
<h2>AdminMart Login</h2>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
>
<Form>
<div className="form-group">
<label htmlFor="email">Email</label>
<Field type="email" id="email" name="email" />
<ErrorMessage name="email" component="div" className="error-message" />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<Field type="password" id="password" name="password" />
<ErrorMessage name="password" component="div" className="error-message" />
</div>
<button type="submit">Login</button>
</Form>
</Formik>
</div>
);
};
export default AdminMartLogin;
2. React Hook Form
React Hook Form is known for its high performance and minimal re-renders. It leverages React hooks to manage form state and validation efficiently. This library is particularly useful when dealing with large forms with many fields.
Key Features:
- High performance with minimal re-renders
- Tiny bundle size
- Flexible and easy integration with UI libraries
- Built-in support for schema-based validation using Yup
import React from 'react';
import { useForm } from 'react-hook-form';
const RegistrationForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log('Form data', data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<label htmlFor="username">Username</label>
<input
id="username"
{...register('username', { required: 'Username is required' })}
/>
{errors.username && <div className="error-message">{errors.username.message}</div>}
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
{...register('email', { required: 'Email is required' })}
/>
{errors.email && <div className="error-message">{errors.email.message}</div>}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
id="password"
{...register('password', { required: 'Password is required' })}
/>
{errors.password && <div className="error-message">{errors.password.message}</div>}
</div>
<button type="submit">Register</button>
</form>
);
};
export default RegistrationForm;
3. React Final Form
React Final Form is the lightweight successor of Redux Form. It provides a powerful form state management solution with minimalistic APIs, allowing you to build complex forms with ease. It’s highly extensible, allowing developers to customize it according to their needs.
Key Features:
- Tiny bundle size
- Extensible with plugins
- Declarative API for form state management
- Supports complex form use cases like field arrays and dynamic forms
import React from 'react';
import { Form, Field } from 'react-final-form';
const SimpleForm = () => {
const onSubmit = (values) => {
console.log('Form data', values);
};
return (
<Form
onSubmit={onSubmit}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label>Username</label>
<Field name="username" component="input" placeholder="Username" />
</div>
<div>
<label>Email</label>
<Field name="email" component="input" placeholder="Email" type="email" />
</div>
<div>
<label>Password</label>
<Field name="password" component="input" placeholder="Password" type="password" />
</div>
<button type="submit">Submit</button>
</form>
)}
/>
);
};
export default SimpleForm;
4. React JSON Schema Form
React JSON Schema Form is a highly flexible and powerful library that automatically generates form fields based on a JSON schema. This library is perfect for scenarios where form structures need to be dynamic and driven by data.
Key Features:
- Automatically generates forms from JSON schemas
- Supports custom widgets and themes
- Validation is performed based on the JSON schema
- Extensible with custom field templates and widgets
import React from 'react';
import Form from "@rjsf/core";
const schema = {
title: "User",
type: "object",
required: ["firstName", "lastName"],
properties: {
firstName: { type: "string", title: "First name", default: "Chuck" },
lastName: { type: "string", title: "Last name" },
age: { type: "integer", title: "Age" },
}
};
const JSONSchemaForm = () => {
const onSubmit = ({ formData }) => console.log("Data submitted: ", formData);
return (
<Form
schema={schema}
onSubmit={onSubmit}
/>
);
};
export default JSONSchemaForm;
5. Unform
Unform is a performance-focused form library for React that’s particularly well-suited for use in applications that require high performance and low latency. It’s a great choice for developers looking for a non-intrusive way to manage forms.
Key Features:
- Minimal re-renders and optimized performance
- Simple and intuitive API
- Supports form validation with Yup
- Handles form submissions and validation out of the box
import React from 'react';
import { Form } from '@unform/web';
import Input from './components/Input';
const ContactForm = () => {
const handleSubmit = (data) => {
console.log('Form data', data);
};
return (
<Form onSubmit={handleSubmit}>
<Input name="name" label="Name" />
<Input name="email" label="Email" type="email" />
<Input name="message" label="Message" multiline />
<button type="submit">Send</button>
</Form>
);
};
export default ContactForm;
Conclusion
Choosing the right form library can significantly impact the efficiency and quality of your React applications. Formik, React Hook Form, React Final Form, React JSON Schema Form, and Unform are all powerful options, each with unique strengths. Depending on your project needs—whether it's performance, ease of use, or dynamic form generation—there's a library that fits perfectly.
Explore these libraries to enhance your form handling in your next React project!
Top comments (0)