What are some examples of custom hooks for forms in React?

What are some examples of custom hooks for forms in React?

Custom hooks in React can simplify form handling. For example, you can create a useForm hook to manage form state.

Can you show me how to implement a useForm hook?

Sure! Here's a simple implementation:

import { useState } from 'react';

const useForm = (initialValues) => {
    const [values, setValues] = useState(initialValues);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setValues({ ...values, [name]: value });
    };

    return [values, handleChange];
};

This hook manages form values and updates them on change.

How can I use this useForm hook in a component?

You can use it like this:

const MyForm = () => {
    const [formValues, handleInputChange] = useForm({ name: '', email: '' });

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formValues);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input name='name' value={formValues.name} onChange={handleInputChange} />
            <input name='email' value={formValues.email} onChange={handleInputChange} />
            <button type='submit'>Submit</button>
        </form>
    );
};

What other custom hooks can I create for forms?

You can create hooks for validation, error handling, or even for managing multiple forms. For example, a useValidation hook could help validate inputs as users type.