Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/storeon/undo
Module for storeon which allows undoing or redoing the latest event
https://github.com/storeon/undo
Last synced: 7 days ago
JSON representation
Module for storeon which allows undoing or redoing the latest event
- Host: GitHub
- URL: https://github.com/storeon/undo
- Owner: storeon
- License: mit
- Created: 2019-05-12T06:42:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:50:42.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T13:11:16.298Z (16 days ago)
- Language: JavaScript
- Homepage:
- Size: 2 MB
- Stars: 32
- Watchers: 3
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storeon undo
Tiny module for [Storeon] which is adding undo functionality to your state. This means that now you can undoing or redoing the events in the state.
It is just 377 bytes module (it uses [Size Limit] to control the size) without any dependencies.
[size limit]: https://github.com/ai/size-limit
[storeon]: https://github.com/storeon/storeon
```js
import { undoable, UNDO, REDO } from "@storeon/undo/full";
const store = createStore([
/* all your modules */
undoable,
]);
// now you can use UNDO and REDO with dispatch
dispatch(UNDO);
```
## Installation
```
npm install @storeon/undo
# or
yarn add @storeon/undo
```
If you need to support IE, you need to [compile `node_modules`] with Babel.
[compile `node_modules`]: https://developer.epages.com/blog/coding/how-to-transpile-node-modules-with-babel-and-webpack-in-a-monorepo/
## Usage
You can use this module in two ways:
- store history for all state
- store history only for specific keys
### Store history for all state
To using the undo/redo functionality you just need to add the `undoable` module to `createStore`.
```js
import { createStoreon } from "storeon";
import { undoable, UNDO, REDO } from "@storeon/undo/full";
let counter = (store) => {
store.on("@init", () => ({ counter: 0 }));
store.on("inc", (state) => ({ counter: state.counter + 1 }));
store.on("dec", (state) => ({ counter: state.counter - 1 }));
};
const store = createStoreon([counter, undoable]);
```
And now you can use the functions `undo` and `redo` to manipulate the history.
```js
const Counter = () => {
const { dispatch, counter } = useStoreon("counter");
return (
{counter}
dispatch("inc")}>Inc
dispatch("dec")}>Dec
);
};
const UndoRedo = () => {
const { dispatch } = useStoreon();
return (
<>
dispatch(UNDO)}>Undo
dispatch(REDO)}>Redo
>
);
};
```
### Store history only for specific keys
If you need history only for some particular keys in state you can use `createHistory` function:
```js
import { createHistory } from "@storeon/undo";
// history will be collect only for key `a`
const history = createHistory(["a"]);
const { UNDO, REDO } = history;
createStore([
/* all your modules */
history.module,
]);
// to change the history use the UNDO and REDO from `history` object
dispatch(UNDO);
```
### API
#### createHistory(paths, config)
##### paths parameter
```js
type paths = Array;
```
The keys of state object that will be stored in history
##### config parameter
```js
type config.key = String
```
The default state key for storing history, when omitted:
- if `paths` is not empty will be generated based on `paths` content
- otherwise will default to `'undoable'`
## LICENSE
MIT
## Acknowledgments
This module based on [Implementing Undo History recipe](https://redux.js.org/recipes/implementing-undo-history) article.