Hero Hook Form API / useFormHelper

Function: useFormHelper()

useFormHelper<T>(options): object

Defined in: hooks/useFormHelper.ts:106

Hook for managing form state with enhanced features.

Type Parameters

T

T extends FieldValues

The form data type

Parameters

options

UseFormHelperOptions<T>

Hook options

Returns

object

Form helper with state and methods

error

error: string | undefined = submissionState.error

form

form: UseFormReturn<T>

handleSubmit()

handleSubmit: () => Promise<void>

Returns

Promise<void>

isSubmitted

isSubmitted: boolean = submissionState.isSubmitted

isSubmitting

isSubmitting: boolean = submissionState.isSubmitting

isSuccess

isSuccess: boolean = submissionState.isSuccess

resetForm()

resetForm: () => void

Returns

void

submissionState

submissionState: FormSubmissionState

Description

Provides form state management with loading states, error handling, and submission tracking. Automatically handles form validation and provides callbacks for success and error cases. This hook wraps React Hook Form’s useForm with additional state management.

Examples


import { useFormHelper } from "@rachelallyson/hero-hook-form";
 
function MyForm() {
  const { form, handleSubmit, isSubmitting, error } = useFormHelper({
    defaultValues: { email: "", name: "" },
    onSubmit: async (data) => {
      await submitToServer(data);
    },
    onError: (error) => {
      console.error("Validation errors:", error);
    },
    onSuccess: (data) => {
      console.log("Success:", data);
    },
  });
 
  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      <button disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
      {error && <div className="error">{error}</div>}
    </form>
  );
}

Using with existing form instance:


import { useForm } from "react-hook-form";
import { useFormHelper } from "@rachelallyson/hero-hook-form";
 
function MyForm() {
  const existingForm = useForm({ defaultValues: { email: "" } });
  const { handleSubmit, isSubmitting } = useFormHelper({
    methods: existingForm,
    onSubmit: async (data) => {
      await submitToServer(data);
    },
  });
 
  // Use existingForm and handleSubmit together
}

See

useHeroForm for alternative hook with different API
ConfigurableForm for component that uses this hook