React Form Libraries

Simplify form handling with libraries.

React Hook Form

Install: ```bash npm install react-hook-form ```

Usage: ```javascript 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

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

Formik

Install: ```bash npm install formik ```

Usage: ```javascript 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!