history-reducer v1.4.13

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

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.

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.