Native undo/redo behavior for web. This lets you push native undo stack events onto your pages, so that users can use Ctrl/Cmd-Z—or even use some other gesture (e.g., on iOS devices, you can shake your phone to Undo).
See a writeup on how this works or an awesome maze-based demo for more.
Usage
Install on NPM/Yarn via undoer
.
You can use this element as a Web Component or as pure, imperative JavaScript.
Web Component
Add the dependency to your JS and register it as a CE:
;customElements;
Then add the element to your page, optionally adding state
attribute to set its zero initial state (otherwise it will be null
):
Finally, use the element's JavaScript API:
const undoerEl = document; undoerEl; // set new state withundoerElstate = 'new state';undoerElstate = /* any object */ ; // or via attribute for string stateundoerEl;
Imperative JavaScript
You can also use the raw Undoer
class without CEs:
;// or; // your build system might allow this // construct with callback and push stateconst initialState = null; // default is nullconst undoer = { console;} initialState;undoer;
Notes
This makes sense as a Web Component as the undo behavior works by adding a hidden <div contentEditable>
to your page.
In the WC case, this is as a child of the element: in the imperative case, it's added (by default) to document.body
.