Autosave
The autosavePlugin — debounced auto-save with status reporting
Autosave
autosavePlugin debounces a save call after the user stops typing, and reports state through form.status[options.key]: "idle" | "saving" | "saved" | "error".
Usage
import { autosavePlugin } from "formify-js";
plugins: [
autosavePlugin({
save: (values) => api.saveDraft(values), // async ok
debounce: 800, // default 1000
key: "autosave", // status key, default "autosave"
}),
]
// In the UI:
{form.status?.autosave === "saving" && <span>💾 Saving…</span>}
{form.status?.autosave === "saved" && <span>✓ Saved</span>}Options
| Option | Type | Default | Description |
|---|---|---|---|
save | (values) => void | Promise | — | The save function. |
debounce | number | 1000 | Wait (ms) after the last change before saving. |
key | string | "autosave" | Key under form.status for the save state. |
Things to know
- A pending save also runs on submit, so manual submission never loses the latest changes.
- Create the plugin once (module scope or
useMemo) — the plugin object identity matters to the form.