React Form Libraries

Simplify form handling with libraries.

React Hook Form

Install:

npm install react-hook-form

Usage:

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

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      {errors.email && <span>Email required</span>}

      <input {...register('password', { minLength: 6 })} />
      {errors.password && <span>Min 6 characters</span>}

      <button type="submit">Submit</button>
    </form>
  );
}

With Validation

<input {...register('email', {
  required: 'Email is required',
  pattern: {
    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    message: 'Invalid email'
  }
})} />

Formik

Install:

npm install formik

Usage:

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

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={values => console.log(values)}
>
  <Form>
    <Field name="email" type="email" />
    <Field name="password" type="password" />
    <button type="submit">Submit</button>
  </Form>
</Formik>

Remember

• React Hook Form: Lightweight, fast
• Formik: Feature-rich, easy
• Both handle validation
• Reduce boilerplate code

Next: Learn data fetching libraries!