history-reducer

Dead simple react hook to create state history based on react useReducer. Developed to implement undo/redo shortcuts.

install

yarn add history-reducer

(TS declarations are shipped within this package)

Usage

Actions

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

Hooks

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 forwardactions.

Keys	Action
cmd + z	back
cmd + shift z	forward

Example

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.