@matthew.ngo/reform
Version:
A flexible and powerful React form management library with advanced validation, state observation, and multi-group support
91 lines (90 loc) • 3.85 kB
TypeScript
import { ReformReturn } from '../../types';
import { FormStateObserverOptions } from './types';
/**
* Hook wrapper for field watching and form state observation in Reform
*
* @template T - The type of form data
* @param reform - Reform hook return value
* @param options - Configuration options for form state observer
* @returns Combined field watcher and form state observer utilities
*
* @example
* // Basic usage
* const form = useReform<UserForm>({...});
* const watcher = useReformWatcher(form);
*
* // Watch a specific field
* useEffect(() => {
* const unsubscribe = watcher.watchField({
* field: 'email',
* callback: (value) => validateEmailAsync(value),
* debounce: 500
* });
*
* return unsubscribe;
* }, [watcher]);
*
* // Subscribe to form state changes
* useEffect(() => {
* const subscription = watcher.subscribeToState((state) => {
* if (state.isDirty) {
* console.log('Form has unsaved changes');
* }
* });
*
* return subscription.unsubscribe;
* }, [watcher]);
*/
export declare const useReformWatcher: <T extends Record<string, any>>(reform: ReformReturn<T>, options?: FormStateObserverOptions<T>) => {
watchField: <K extends keyof T>(config: import("./types").FieldWatchConfig<T, K>) => () => void;
watchFields: <K_1 extends keyof T>(configs: import("./types").FieldWatchConfig<T, K_1>[]) => () => void;
getFieldValue: <K_2 extends keyof T>(field: K_2, groupIndex: number) => T[K_2] | undefined;
triggerFieldWatch: <K_3 extends keyof T>(field: K_3, groupIndex?: number | undefined) => void;
subscribeToState: (handler: import("./types").FormStateChangeHandler<T>) => import("./types").FormStateSubscription;
getFormState: () => import("react-hook-form").FormState<{
groups: import("../..").FormGroup<T>[];
}>;
getPreviousState: () => Partial<import("react-hook-form").FormState<{
groups: import("../..").FormGroup<T>[];
}>> | null;
isDirty: () => boolean;
hasErrors: () => boolean;
isSubmitting: () => boolean;
isValid: () => boolean;
/**
* Watch a field and update when form state changes
*
* @param config - Field watch configuration
* @param stateHandler - Optional handler for form state changes
* @returns Function to unsubscribe both watchers
*/
watchFieldWithState: (config: Parameters<(<K extends keyof T>(config: import("./types").FieldWatchConfig<T, K>) => () => void)>[0], stateHandler?: import("./types").FormStateChangeHandler<T> | undefined) => () => void;
/**
* Watch a field only when the form is valid
*
* @param config - Field watch configuration
* @returns Function to unsubscribe
*/
watchFieldWhenValid: (config: Parameters<(<K extends keyof T>(config: import("./types").FieldWatchConfig<T, K>) => () => void)>[0]) => () => void;
/**
* Watch for changes in a specific field's error state
*
* @param field - Field to watch for errors
* @param callback - Callback function when error state changes
* @returns Function to unsubscribe
*/
watchFieldErrors: (field: keyof T, callback: (hasError: boolean, errorMessage: string | null) => void) => import("./types").FormStateSubscription;
/**
* Create a debounced auto-save function that triggers when form becomes dirty
*
* @param saveFunction - Function to call when auto-save triggers
* @param debounceMs - Debounce delay in milliseconds
* @returns Object with control methods
*/
createAutoSave: (saveFunction: () => void | Promise<void>, debounceMs?: number) => {
stop: () => void;
start: () => void;
trigger: () => void;
unsubscribe: () => void;
};
};