Hero Hook Form API / useEnhancedFormState

Function: useEnhancedFormState()

useEnhancedFormState<T>(form, options?): EnhancedFormState<T>

Defined in: hooks/useEnhancedFormState.ts:116

Hook for managing enhanced form state with submission tracking.

Type Parameters

T

T extends FieldValues

The form data type

Parameters

form

UseFormReturn<T>

React Hook Form instance

options?

UseEnhancedFormStateOptions<T> = {}

Configuration options

Returns

EnhancedFormState<T>

Enhanced form state object

Description

Provides advanced form state management including submission status, error tracking, touched/dirty field tracking, and automatic reset functionality. Useful for building forms with rich UI feedback.

Example


import { useEnhancedFormState } from "@rachelallyson/hero-hook-form";
import { useForm } from "react-hook-form";
 
function MyForm() {
  const form = useForm();
  const state = useEnhancedFormState(form, {
    onSuccess: (data) => {
      console.log("Success:", data);
    },
    onError: (error) => {
      console.error("Error:", error);
    },
    autoReset: true,
    resetDelay: 3000,
  });
 
  const handleSubmit = async (data) => {
    try {
      await submitToServer(data);
      state.handleSuccess(data);
    } catch (error) {
      state.handleError(error.message);
    }
  };
 
  return (
    <form onSubmit={form.handleSubmit(handleSubmit)}>
      {/* form fields */}
      {state.isSubmitting && <div>Submitting...</div>}
      {state.isSuccess && <div>Success!</div>}
      {state.error && <div>Error: {state.error}</div>}
    </form>
  );
}

See

ZodForm which uses this hook internally