Hero Hook Form API / useHeroForm

Function: useHeroForm()

useHeroForm<TFieldValues>(): object

Defined in: hooks/useHeroForm.ts:47

Enhanced hook that provides both form methods and styling defaults.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Returns

object

Enhanced form object with all React Hook Form methods and Hero Hook Form defaults

defaults

defaults: Required<Pick<HeroHookFormDefaultsConfig, "input" | "textarea" | "select" | "switch" | "radioGroup" | "checkbox" | "slider" | "dateInput" | "submitButton">>

Description

This hook combines React Hook Form’s useFormContext with Hero Hook Form’s styling defaults, giving you access to both form functionality and component styling in one convenient hook. Must be used within a FormProvider context (provided by ZodForm, ConfigurableForm, or manual FormProvider).

Example


import { useHeroForm } from "@rachelallyson/hero-hook-form";
 
function MyComponent() {
  const { formState, getValues, setValue, defaults } = useHeroForm();
 
  // Access form state
  const isSubmitting = formState.isSubmitting;
  const errors = formState.errors;
 
  // Access form methods
  const values = getValues();
  const handleReset = () => setValue('fieldName', '');
 
  // Access styling defaults
  const inputDefaults = defaults.input;
  const buttonDefaults = defaults.submitButton;
}

See

useFormHelper for form state management with callbacks
useFormContext from React Hook Form for base functionality