UseFormik

1'use client';
2 
3import { useCallback, useEffect } from 'react';
4 
5import { FormikConfig, FormikHelpers, FormikValues, useFormik } from 'formik';
6 
7/**
8 * Extended Formik return type with a simplified onSubmit handler.
9 */
10export type UseFormikReturn<T extends FormikValues> = ReturnType<
11  typeof useFormik<T>
12> & {
13  /**
14   * Returns a memoized submit handler that wraps Formik's handleSubmit.
15   *
16   * @param handler Function called when the form is submitted.
17   */
18  onSubmit: (
19    handler: (
20      values: T,
21      formikHelpers: FormikHelpers<T>,
22    ) => void | Promise<void>,
23  ) => (e?: React.FormEvent<HTMLFormElement>) => void;
24};
25 
26/**
27 * Custom hook wrapping Formik's useFormik, providing a simplified onSubmit handler
28 * and optional debug logging of form state changes.
29 *
30 * @param config Formik configuration options.
31 * @returns Form methods and a memoized onSubmit helper.
32 */
33export function useFormikHook<T extends FormikValues = FormikValues>(
34  config: FormikConfig<T>,
35): UseFormikReturn<T> {
36  const formik = useFormik<T>(config);
37 
38  const handleSubmit = useCallback(
39    (
40      handler: (
41        values: T,
42        formikHelpers: FormikHelpers<T>,
43      ) => void | Promise<void>,
44    ) => {
45      return (e?: React.FormEvent<HTMLFormElement>) => {
46        e?.preventDefault();
47        handler(formik.values, formik);
48      };
49    },
50    [formik],
51  );
52 
53  // Debug: Log form values and errors in development mode
54  useEffect(() => {
55    if (process.env.NODE_ENV === 'development') {
56      console.debug('[useFormikHook] values:', formik.values);
57      console.debug('[useFormikHook] errors:', formik.errors);
58    }
59  }, [formik.values, formik.errors]);
60 
61  return { ...formik, onSubmit: handleSubmit };
62}