⚛️ Dead simple react hook to create state history based on react useReducer
MIT License
Dead simple react hook to create state history based on react useReducer. Developed to implement undo/redo shortcuts.
yarn add history-reducer
(TS declarations are shipped within this package)
Action | Description |
---|---|
push |
push new current state |
back |
make the prev state the current, and push the current to the future stack |
forward |
if available, push the last future state to the current, and make the current the last past state |
reset |
reset past and future state, and optional set a new current state |
useHistoryReducer
const [{present, past, future}, dispatch] = useHistoryReducer(0, 5);
The hook useHistoryReducer
returns the current state including present
, past
and future
as the first argument, and a dispatch
function as second. It accepts a default value as a first argument, and the max length for past
and future
as an optional second argument.
useUndoRedoHistory
const [state, dispatch] = useHistoryReducer();
useUndoRedoHistory(dispatch);
The hook useUndoRedoHistory
listens to keydown
events on window
and dispatches back
and forward
actions.
Keys | Action |
---|---|
cmd + z
|
back |
cmd + shift z
|
forward |
import {useHistoryReducer, useUndoRedoHistory} from "history-reducer";
const HistoryReducerExample = () => {
const [{present, past}, dispatch] = useHistoryReducer(0);
useUndoRedoHistory(dispatch);
return (
<div>
<p>Current value is {present}, but has been {past} before</p>
<button onClick={() => dispatch({type:'push', state: Math.abs(Math.random() * 100)})}>add</button>
<button onClick={() => dispatch({type: 'back'})}>back</button>
</div>
)
}
Also check out the example here.