@matthew.ngo/reform/src/features/persistence/useReformPersistence.ts

A flexible and powerful React form management library with advanced validation, state observation, and multi-group support

import { useMemo } from "react";
import { useFormPersistence } from "./useFormPersistence";
import { FormPersistenceConfig } from "./types";
import { ReformReturn } from "../../types";

/**
 * Hook wrapper for form persistence in Reform forms
 *
 * @template T - The type of form data
 * @param reform - Reform hook return value
 * @param config - Configuration for form persistence
 * @returns Form persistence state and methods
 *
 * @example
 * // Basic usage
 * const reform = useReform<UserForm>({...});
 * const persistence = useReformPersistence(reform, {
 *   enabled: true,
 *   storageKey: "user-form",
 *   autoSave: true
 * });
 *
 * // Manual save
 * <button onClick={persistence.saveState}>Save</button>
 */
export const useReformPersistence = <T extends Record<string, any>>(
  reform: ReformReturn<T>,
  config: FormPersistenceConfig<T> = {}
) => {
  // Memoize config to prevent unnecessary re-renders
  const memoizedConfig = useMemo(
    () => ({
      enabled: config.enabled ?? false,
      storageKey: config.storageKey ?? "reform-form-state",
      storageProvider: config.storageProvider,
      autoSave: config.autoSave ?? false,
      autoSaveInterval: config.autoSaveInterval ?? 5000,
      debounceAutoSave: config.debounceAutoSave ?? true,
      debounceDelay: config.debounceDelay ?? 500,
      onBeforeSave: config.onBeforeSave,
      onAfterSave: config.onAfterSave,
      onAfterRestore: config.onAfterRestore,
      metadata: config.metadata,
    }),
    [
      config.enabled,
      config.storageKey,
      config.storageProvider,
      config.autoSave,
      config.autoSaveInterval,
      config.debounceAutoSave,
      config.debounceDelay,
      config.onBeforeSave,
      config.onAfterSave,
      config.onAfterRestore,
      // Use JSON.stringify for complex objects to compare by value
      typeof config.metadata === "function"
        ? config.metadata
        : JSON.stringify(config.metadata),
    ]
  );

  // Use the optimized form persistence hook with memoized config
  return useFormPersistence(reform, memoizedConfig);
};