Ever needed some simple undo/redo functionality in React? Do I have the library for you! Announcing @djgould/react-use-undo! Check it out: https://github.com/djgould/react-use-undo

Writing a small and concise library like this is super fun. The use case is well constrained, and it lends itself very nicely to robust test coverage. I needed this functionality for another project of mine, to be announced soon, so I figured I'd put it in a nice library for others to use!

Usage

Super simple usage to keep commands in state, and enable the ability to undo and redo commands.

import React from "react";
import { useUndo } from "@djgould/react-use-undo";

function App() {
  const [commands, addCommand, undo, redo] = useUndo(0);

  return (
    <div>
      <button onClick={() => addCommand(commands[commands.length] + 1)}>
        Increment
      </button>
      <button onClick={undo}>Undo</button>
      <button onClick={redo}>Redo</button>
      <p>last value: {commands[commands.length - 1]}</p>
    </div>
  );
}

Check out the code (<50 lines) to see how it works: https://github.com/djgould/react-use-undo/blob/main/src/index.ts

Small lib, small post, bye!