Package Exports

zundo

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (zundo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🍜 Zundo

Undo middleware for your favorite, comfy, bearbones state-management solution: zustand.

zundo demo 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 tacks 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 } = useUndo();
  const { bears, increasePopulation, removeAllBears } = useStore();

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

Road Map

add redo. probably with index to traverse through prevStates
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 :)