undo-peasy

undo/redo for easy peasy

Stats

StarsIssuesVersionUpdatedCreatedSize
undo-peasy
700.5.0a month agoa year agoMinified + gzip package size for undo-peasy in KB

Readme

Undo/Redo support for easy peasy.

undo-peasy

  • automatically saves a history of state changes made in your application.
  • provides ready to use undo and redo actions.

Usage

  1. Attach undoRedo middlware in createStore. The middleware will automatically save every state change made to an undoable model. const store = createStore(appModel, { middleware: [undoRedo()], });
  2. If using typescript, extend WithUndo in the root application model. WithUndo will add types for undo actions and metadata. interface Model extends WithUndo { count: number; increment: Action<Model>; }
  3. Use undoable to wrap the root application model instance. undoable() will make undo/redo actions available and save state changes forwarded by the middleware. const appModel: Model = undoable({ count: 0, increment: action((state) => { state.count++; }), });
  4. Profit
    const undo = useStoreActions((actions) => actions.undoUndo);
    

Supported Actions

  • undoUndo - restore state to the most recently saved version.
  • undoRedo - restore state to the most recently undone version.
  • undoGroupStart - start a group, no states will be saved until group completes.
  • undoGroupComplete - complete a group of changes and save state.
  • undoReset - erases saved undo/redo history and saves the current state.
  • undoSave - save current application state to undo history. (undoSave is generated automatically by the middleware.)

Configuration

The undoable() function accepts an optional configuration object as its second parameter.

  • maxHistory - maximum number of history states to save. The oldest states are dropped to prevent the history from growing without bounds.
  • noSaveKeys - a function that tells undoRedo not to save certain keys inside the state model to undo/redo history. e.g. view state in the model.
  • skipAction - a function that tells undoRedo not to save state after user specified actions or state conditions.
  • logDiffs - set to true to see some debug logging about changes to undo state

History is persisted in the browser's localStorage.

Hooks

useUndoGroup() - returns a function that can be used to group a related set of changes into one undo/redo state.

  const undoGroup = useUndoGroup();

  undoGroup(() => {
    /* state changes in here will be saved as a single undo/redo state */
  }); 

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.