import { FieldPath, FieldValues, PathValue, UseFormReturn } from 'react-hook-form'; /** * Minimal interface for form methods required by useOnFormValueChange. * This helps avoid type conflicts between react-hook-form and remix-hook-form. */ export interface WatchableFormMethods { watch: UseFormReturn['watch']; getValues: UseFormReturn['getValues']; } export interface UseOnFormValueChangeOptions = FieldPath> { /** * The name of the form field to watch */ name: TName; /** * Callback function that runs when the field value changes * @param value - The new value of the watched field * @param prevValue - The previous value of the watched field */ onChange: (value: PathValue, prevValue: PathValue) => void; /** * Optional form methods if not using RemixFormProvider context */ methods?: WatchableFormMethods; /** * Whether the hook is enabled (default: true) */ enabled?: boolean; } /** * A hook that watches a specific form field and executes a callback when its value changes. * This is useful for creating reactive form behaviors where one field's value affects another field. * * @example * ```tsx * // Make a discount field appear when order total exceeds $100 * useOnFormValueChange({ * name: 'orderTotal', * onChange: (value) => { * if (value > 100) { * methods.setValue('discountCode', ''); * } * } * }); * ``` * * @example * ```tsx * // Update a full name field when first or last name changes * useOnFormValueChange({ * name: 'firstName', * onChange: (value) => { * const lastName = methods.getValues('lastName'); * methods.setValue('fullName', `${value} ${lastName}`); * } * }); * ``` */ export declare const useOnFormValueChange: = FieldPath>(options: UseOnFormValueChangeOptions) => void; //# sourceMappingURL=use-on-form-value-change.d.ts.map