react-undo-redo

react-undo-redo

A utility to add undo and redo functionality to any state managed through a reducer. This library does not require redux. If you're looking for something that adds undo and redo to a state that is managed through redux you might be in the wrong place.

Installation

Through yarn.

yarn add react-undo-redo

Through npm

npm install --save react-undo-redo

Usage

import React from "react";
import { createUndoRedo } from "react-undo-redo";

import { yourReducer } from "./yourReducer";

const { UndoRedoProvider, usePresent, useUndoRedo } = createUndoRedo(
  yourReducer,
  initialState
);

function Application() {
  return <UndoRedoProvider>{/* Your application code */}</UndoRedoProvider>;
}

function Menu() {
  const [undo, redo] = useUndoRedo();

  return (
    <>
      <button onClick={() => undo()}>Undo</button>
      <button onClick={() => redo()}>Redo</button>
    </>
  );
}