Top React Form Libraries

React-Hook-Form:-

React-hook-form is a library that helps you validate forms in React. React-hook-form is a minimal library without any other dependencies. It is performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries.

npm install react-hook-form

Example:

import React from 'react';

import { useForm } from 'react-hook-form';

function App() {

  const { register, handleSubmit, errors } = useForm(); // initialize the hook

  const onSubmit = (data) => {

    console.log(data);

  };

  return (

    <form onSubmit={handleSubmit(onSubmit)}>

      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} />

      {errors.lastname && 'Last name is required.'}

      <input name="age" ref={register({ pattern: /\d+/ })} />

      {errors.age && 'Please enter number for age.'}

      <input type="submit" />

    </form>

  );

}

React Final Form:-

React Final Form is a lightweight structure library written in center JavaScript that goes about as a covering around Final Form, a structure state the board library. Respond Final Form utilizes the onlooker configuration design in which the parts prefer explicit occasions.

npm install --save final-form react-final-form

or

yarn add final-form react-final-form

Example:

import { Form, Field } from 'react-final-form'

const MyForm = () => (

  <Form

    onSubmit={onSubmit}

    validate={validate}

    render={({ handleSubmit }) => (

      <form onSubmit={handleSubmit}>

        <h2>Simple Default Input</h2>

        <div>

          <label>First Name</label>

          <Field name="firstName" component="input" placeholder="First Name" />

        </div>

        <h2>An Arbitrary Reusable Input Component</h2>

        <div>

          <label>Interests</label>

          <Field name="interests" component={InterestPicker} />

        </div>

        <h2>Render Function</h2>

        <Field

          name="bio"

          render={({ input, meta }) => (

            <div>

              <label>Bio</label>

              <textarea {...input} />

              {meta.touched && meta.error && <span>{meta.error}</span>}

            </div>

          )}

        />

        <h2>Render Function as Children</h2>

        <Field name="phone">

          {({ input, meta }) => (

            <div>

              <label>Phone</label>

              <input type="text" {...input} placeholder="Phone" />

              {meta.touched && meta.error && <span>{meta.error}</span>}

            </div>

          )}

        </Field>

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

      </form>

    )}

  />

)

Formic:-

Formic is a little gathering of React parts and snares for building structures in React and React Native. It assists with the three most irritating parts: Getting esteems all through structure state. Approval and blunder messages. Taking care of structure accommodation.

npm i formik

Example:

import React from 'react';

import { Formik, Field, Form, ErrorMessage } from 'formik';

import * as Yup from 'yup';

const SignupForm = () => {

return (

<Formik

initialValues={{ firstName: '', lastName: '', email: '' }}

validationSchema={Yup.object({

firstName: Yup.string()

.max(15, 'Must be 15 characters or less')

.required('Required'),

lastName: Yup.string()

.max(20, 'Must be 20 characters or less')

.required('Required'),

email: Yup.string().email('Invalid email address').required('Required'),

})}

onSubmit={(values, { setSubmitting }) => {

setTimeout(() => {

alert(JSON.stringify(values, null, 2));

setSubmitting(false);

}, 400);

}}

>

<Form>

<label htmlFor="firstName">First Name</label>

<Field name="firstName" type="text" />

<ErrorMessage name="firstName" />

<label htmlFor="lastName">Last Name</label>

<Field name="lastName" type="text" />

<ErrorMessage name="lastName" />

<label htmlFor="email">Email Address</label>

<Field name="email" type="email" />

<ErrorMessage name="email" />

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

</Form>

</Formik>

);

};

export default SigupForm