Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProState with a history: set, undo, redo, jump back to a point and reset, with a cap on how many steps are kept.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for editors, drawing tools, form builders and anywhere a person expects Undo and Redo.
Do not use it for large documents that need diffs or collaboration; keep patches instead of whole snapshots.
import { useUndoState } from "@/hooks/use-undo-state"const [text, { set, undo, redo, canUndo, canRedo }] = useUndoState("", {
limit: 50,
})useUndoState<T>(initial: T, options?): [T, controls]
| Option | Type | Default | Description |
|---|---|---|---|
limit | number | 100 | Most past steps kept (oldest drop). |
| Control | Description |
|---|---|
set(next) | Push a new value (value or updater). Clears the redo stack. Setting an equal value does nothing. |
undo() / redo() | Move back or forward one step. |
go(index) | Jump to a point in the whole history. |
reset(value?) | Clear the history and start from value (default the initial). |
canUndo, canRedo | Booleans for disabling buttons. |
history | { past, future } arrays for showing a list of steps. |
A hook has no markup. Bind Undo and Redo to buttons that are disabled with canUndo and canRedo, and offer Ctrl or Cmd+Z and Shift+Z. Announce what was undone in a polite live region.
The hook ships with renderHook tests (use-undo-state.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.