🍜 Zundo

enable time-travel in your apps. undo/redo middleware for zustand. built with zustand.

See a demo

Install

npm i zundo

First create a store with undo middleware

This returns the familiar store accessible by a hook! But now your store tracks past actions.

import create from 'zustand';
import { undo, useUndo } from 'zundo';

const useStore = create(
  undo(set => ({
    bears: 0,
    increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 }),
  }))
);

Then bind your components

Use your store anywhere and get undo from zundo and add it to a button to go backwards in time!

const App = () => {
  const { undo, redo } = useUndo();
  const { bears, increasePopulation, removeAllBears } = useStore();

  return (
    <>
      bears: {bears}
      <button onClick={increasePopulation}>increase</button>
      <button onClick={removeAllBears}>remove</button>
      <button onClick={undo}>undo</button>
      <button onClick={redo}>redo</button>
    </>
  );
};

API

undo()

Middleware for Zustand to add the ability to time travel through states.

import create from 'zustand';
import { undo } from 'zundo';

const useStore = create(
  undo(() => ({ ... }))
);

useUndo()

Hook that provides reference to a store containing actions that undo/redo states for your main store when called.

const { undo, redo } = useUndo();

• undo: call function to apply previous state (if there are previous states)
• redo: call function to apply future state (if there are future states). Future states are "previous previous states."

Dispatching a new state will clear all of the future states.

Road Map

• possibly use better data structure for storing previous states. Maybe just a diff between states?
• clean up api? return undo with the store hook?

Contributing

Issues and PRs are welcome. I'd like to hear your comments and critiques. We can discuss ways to make this package better. Thanks :)