@supunlakmal/hooks/dist/hooks/forms/useForm.js

A collection of reusable React hooks

import { useState, useCallback } from 'react';
/**
 * Custom hook for managing form state and handling submissions.
 *
 * @template T An object type representing the form fields.
 * @param {T} initialValues The initial values for the form fields.
 * @returns {UseFormReturn<T>} An object containing form values, handlers, and reset function.
 */
export const useForm = (initialValues) => {
    const [values, setValues] = useState(initialValues);
    /**
     * Handles changes in form inputs (input, textarea, select).
     * Updates the corresponding field in the state.
     */
    const handleChange = useCallback((event) => {
        const { name, value, type } = event.target;
        const target = event.target;
        // Handle checkbox input type
        if (type === 'checkbox' && target instanceof HTMLInputElement) {
            setValues((prevValues) => (Object.assign(Object.assign({}, prevValues), { [name]: target.checked })));
        }
        else {
            setValues((prevValues) => (Object.assign(Object.assign({}, prevValues), { [name]: value })));
        }
    }, []);
    /**
     * Creates a submit handler function.
     * Prevents the default form submission and calls the provided onSubmit callback.
     *
     * @param {(values: T) => void} onSubmit The callback function to execute with form values upon submission.
     * @returns {(event: FormEvent<HTMLFormElement>) => void} The event handler for the form's onSubmit event.
     */
    const handleSubmit = useCallback((onSubmit) => (event) => {
        event.preventDefault();
        onSubmit(values);
    }, [values]);
    /**
     * Resets the form fields back to their initial values.
     */
    const resetForm = useCallback(() => {
        setValues(initialValues);
    }, [initialValues]);
    return {
        values,
        handleChange,
        handleSubmit,
        resetForm,
        setValues, // Expose setValues for more complex state updates if needed
    };
};
//# sourceMappingURL=useForm.js.map