use-undoable-reducer

A react hook to add undo and redo history to a reducer from useReducer.

Installation

Using yarn

yarn add use-undoable-reducer

Using npm

npm install use-undoable-reducer

Basic Usage

import React from 'react';
import { useUndoableReducer } from 'use-undoable-reducer';

export function MyApp() {
  const {
    state,
    dispatch,
    canRedo,
    canUndo,
    triggerRedo,
    triggerUndo,
  } = useUndoableReducer(reducer, initialState);

  return (
    <div>
      <button disabled={!canUndo} onClick={triggerUndo}>
        Undo
      </button>
      <button disabled={!canRedo} onClick={triggerRedo}>
        Redo
      </button>
    </div>
  );
}

| Property | Type | Description | | ----------- | -------- | ------------------------------------------------------------------------------ | | state | object | Current state object. | | dispatch | function | Dispatcher function returned from useReducer | | canRedo | boolean | Indicates if there are any contents in the history stack that can be restored. | | canUndo | boolean | Indicates if there are any contents in the history stack. | | triggerRedo | function | Redo the previous action. | | triggerUndo | function | Undo the previous action. |

Options

import { useUndoableReducer, excludeActionTypes } from 'use-undoable-reducer';

const {
  state,
  dispatch,
  canRedo,
  canUndo,
  triggerRedo,
  triggerUndo,
} = useUndoableReducer(reducer, initialState, {
  maxHistory: 10,
  filterActionTypes: excludeActionTypes(['my_action_to_ignore']),
  ignoreInitialState: true,
});

| Option | Type | Default | Description | | ------------------ | -------- | --------- | ------------------------------------------------------- | | maxHistory | number | 20 | The maximum number of items to keep in undo history. | | filterActionTypes | function | undefined | Actions to be ignored from undo history. | | ignoreInitialState | boolean | undefined | Ignore the first state update and don't add to history. |

excludeActionTypes

excludeActionTypes is a helper function exposed to be used with filterActionTypes. You can pass in an array of actions that you want to be ignored from undo history.

Type signature:

excludeActionTypes(actions: Array<string>) => void;