persist-ui/src/react.ts

Universal input persistence for Vanilla, React, Vue, Astro, Next.js etc. with secure AES encryption.

import { useRef, useEffect } from "react";
import { persistUI } from "./core";

export function usePersistUI(
    key: string,
    opts?: Partial<{
        debounce: number;
        encrypt: boolean;
        encryptionSecret: string;
        ignoreTypes: string[];
        onRestore: (data: Record<string, any>) => void;
        clearOnSubmit: boolean;
        submitSelector: string;
        resetOnUnmount?: boolean;
    }>
) {
    // Support all form element types
    const ref = useRef<HTMLElement>(null);

    useEffect(() => {
        if (!ref.current) return;

        const persist = persistUI.attach(ref.current, {
            key,
            ...opts
        });

        // Only reset on unmount if explicitly requested
        return () => {
            if (opts?.resetOnUnmount) {
                persist.reset();
            }
        };
    }, [key, opts]);

    return ref;
}