useAutoSave

GitHub

A robust hook for auto-saving form data with debouncing, race-condition handling, and lifecycle safety. It monitors the data state and triggers the onSave callback after a specified delay of inactivity. It also provides a smart onChange handler that adapts to both React Events and direct values.

Installation

npx sse-hooks add use-auto-save

yarn dlx sse-hooks add use-auto-save

pnpm dlx sse-hooks add use-auto-save

deno run -A npm:sse-hooks add use-auto-save

bunx sse-hooks add use-auto-save

Usage

example.ts

import { useAutoSave } from "./{hooks file}";

const { data, onChange, isSaving } = useAutoSave(
  { title: "My Draft", content: "", isOpen: true },
  async (cleanData) => {
    // 'isOpen' is excluded, so cleanData only has title and content
    await api.saveDraft(cleanData);
  },
  { delay: 2000, exclude: ["isOpen"] },
);

return (
  <input
    value={data.title}
    onChange={onChange("title")} // Handles event automatically
  />
);

API

Parameters

Prop	Default	Type
`initialData`	-	`T` The initial state of the data object.
`onSave`	-	`(data: Omit<T, K>) => void \| Promise<void>` The async function to call when data changes. Receives the clean data payload.
`config`	-	`BaseConfig & Object` Configuration options.

Returns

Return Value	Default	Type
`data`	-	`T` The current state of the data.
`isSaving`	-	`boolean` Indicates if a save operation is currently in progress.
`onChange`	-	`(key: any) => (valueOrEvent: any) => void` A smart change handler factory. Can be used with standard inputs `onChange("name")` or direct values `onChange("age")(30)`.
`setData`	-	`Dispatch<SetStateAction<T>>` Standard React state setter for the data.

Types Aliases

No specific type aliases defined for this component.

Changelog

81fa5 — feat: add useAutoSave and useCallbackRef hooks with comprehensive documentation

useClickAway

Custom hook that triggers a callback when a user clicks outside the referenced element. It handles portal elements, scrollbar clicks, and touch interactions intelligently.

useIndexedDB

Custom hook that provides an interface to the `IndexedDB API` for client-side storage of significant amounts of structured data.