useStateWithHistory

A hook that extends useState with history functionality, allowing undo and redo operations.

useStateWithHistory is a custom React hook that extends the basic useState functionality by keeping a history of state values, allowing you to move backward and forward through previous states, similar to undo and redo operations.

It accepts a default value and an optional capacity to limit the history size. The hook returns the current value, a setter function, and an object containing the history array, the current pointer index, and functions to navigate back, forward, or jump to a specific point in the history.

This is especially useful for features like undo/redo in forms, editors, or any component where tracking state changes is valuable.

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/useStateWithHistory.json

Usage

import { useStateWithHistory } from "@/hooks/useStateWithHistory";

const [value, setValue, { history, pointer, back, forward, go }] =
  useStateWithHistory("initial", { capacity: 5 });

// Navigate through history
const handleUndo = () => back();
const handleRedo = () => forward();
const jumpToIndex = (index: number) => go(index);