♻️ use-undo

undo/redo functionality with React Hooks.

Installation

yarn add use-undo

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import useUndo from 'use-undo';

const App = () => {
  const [
    countState,
    {
      set: setCount,
      reset: resetCount,
      undo: undoCount,
      redo: redoCount,
      canUndo,
      canRedo,
    },
  ] = useUndo(0);
  const { present: presentCount } = countState;

  return (
    <div>
      <p>You clicked {presentCount} times</p>
      <button key="increment" onClick={() => setCount(presentCount + 1)}>
        +
      </button>
      <button key="decrement" onClick={() => setCount(presentCount - 1)}>
        -
      </button>
      <button key="undo" onClick={undoCount} disabled={!canUndo}>
        undo
      </button>
      <button key="redo" onClick={redoCount} disabled={!canRedo}>
        redo
      </button>
      <button key="reset" onClick={() => resetCount(0)}>
        reset to 0
      </button>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

API

useUndo

const [state, actions] = useUndo(initialState);

state

Type: Object

actions

Type: Object

How does it work?

Refer to Redux Implementing Undo History, use-undo implements the same concect with useReducer.
The state structure looks like:

{
  past: Array<T>,
  present: <T>,
  future: Array<T>
}

It stores all states we need. To operate on this state, there are three functions in actions (set, undo and redo) that dispatch defined types and necessary value.

Related repo

• omnidan/redux-undo

License

MIT © homerchen19