react-hook-form-autosave: Skill for Claude Code

react-hook-form-autosave

Drop-in autosave for react-hook-form. Watches dirty fields, debounces, validates, and sends only changed data via a pluggable transport layer.

npm install react-hook-form-autosave

Requires react-hook-form >=7 and react >=18 as peer dependencies.

Minimal Setup

import { useForm } from "react-hook-form";
import { useRhfAutosave, fetchTransport } from "react-hook-form-autosave";

const form = useForm({ defaultValues: { name: "", email: "" } });

const { isSaving, hasPendingChanges } = useRhfAutosave({
  form,
  transport: fetchTransport("/api/save", { method: "PATCH" }),
  config: { debounceMs: 600 },
});

Core Concepts

The library is built around three pillars: a pluggable Transport layer for saving, a Validation strategy that gates saves, and a Baseline tracker that diffs dirty fields against the last-known server state.

Transport

A transport is (payload, ctx?) => Promise<{ ok: true } | { ok: false, error: Error }>.

Transport	Use case
fetchTransport(url, opts?)	REST API
serverActionTransport(action, opts?)	Next.js Server Actions
trpcTransport(mutation)	tRPC

Custom transport:

const myTransport: Transport = async (payload) => {
  try {
    await myApi.save(payload);
    return { ok: true };
  } catch (e) {
    return { ok: false, error: e as Error };
  }
};

Wrap any transport with retry: withRetry(transport, { maxRetries: 3, baseDelayMs: 1000 }).

Validation

Control via validateBeforeSave: "payload" (default, changed fields only), "all" (full form), or "none" (skip).

Key Mapping & Payload Transform

// Rename keys (camelCase → snake_case)
keyMap: { fullName: "full_name" }

// Transform entire payload
mapPayload: (payload) => ({ data: payload, updatedAt: Date.now() })

// Select specific fields
selectPayload: (values, dirtyFields) => ({ name: values.name })

Undo / Redo

const { undo, redo, canUndo, canRedo, undoLastSave } = useRhfAutosave({
  form,
  transport,
  undo: { enabled: true, hotkeys: true },
});