UseReactHookForm

1'use client';
2 
3import { useCallback, useEffect } from 'react';
4 
5import {
6  FieldValues,
7  SubmitErrorHandler,
8  SubmitHandler,
9  useForm,
10  UseFormProps,
11  UseFormReturn,
12} from 'react-hook-form';
13 
14/**
15 * Extended React Hook Form return type with a simplified onSubmit handler.
16 */
17export interface UseReactHookFormReturn<T extends FieldValues>
18  extends UseFormReturn<T> {
19  /**
20   * Returns a memoized submit handler that wraps React Hook Form's handleSubmit.
21   *
22   * @param onValid Function called when the form is valid.
23   * @param onInvalid Optional function called on validation errors.
24   */
25  onSubmit: (
26    onValid: SubmitHandler<T>,
27    onInvalid?: SubmitErrorHandler<T>,
28  ) => (e?: React.BaseSyntheticEvent) => Promise<void>;
29}
30 
31/**
32 * Custom hook wrapping React Hook Form's useForm, providing a simplified onSubmit handler
33 * and optional debug logging of form state changes.
34 *
35 * @param options React Hook Form options.
36 * @returns Form methods and a memoized onSubmit helper.
37 */
38export function useReactHookForm<T extends FieldValues = FieldValues>(
39  options?: UseFormProps<T>,
40): UseReactHookFormReturn<T> {
41  const methods = useForm<T>(options);
42  const { handleSubmit, formState } = methods;
43 
44  const onSubmit = useCallback(
45    (onValid: SubmitHandler<T>, onInvalid?: SubmitErrorHandler<T>) =>
46      handleSubmit(onValid, onInvalid),
47    [handleSubmit],
48  );
49 
50  // Debug: Log form state changes in development mode
51  useEffect(() => {
52    if (process.env.NODE_ENV === 'development') {
53      console.debug('[useReactHookForm] formState changed:', formState);
54    }
55  }, [formState]);
56 
57  return { ...methods, onSubmit };
58}