Dead simple react hook to create state history based on react useReducer

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

Hook

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.

Example

Basic

import {useHistoryReducer} from "history-reducer";

const HistoryReducerExample = () => {
    const [{present, past}, dispatch] = useHistoryReducer(0);
    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>
    )
}

Basic TS

import {Action, useHistoryReducer} from "history-reducer";

const HistoryReducerExample = () => {
    const [{present, past}, dispatch] = useHistoryReducer<number>(0);
    return (
        <div>
            <p>Current value is {present}, but has been {past} before</p>
            <button onClick={() => dispatch({type:Action.PUSH, state: Math.abs(Math.random() * 100)})}>add</button>
            <button onClick={() => dispatch({type: Action.BACK})}>back</button>
        </div>
    )
}

Also check out the example here.

Download Details:

Author: marcolink

Source Code: https://github.com/marcolink/history-reducer

#react #reactjs #javascript