React Hooks to implement Undo and Redo functionality
Switch branches/tags
Nothing to show
Clone or download
Latest commit 7dcd500 Nov 9, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Initial commit Nov 5, 2018
.gitignore Initial commit Nov 5, 2018
LICENSE Initial commit Nov 5, 2018 Update Nov 5, 2018
index.js Use useCallback to memorize reducers and avoid mutate state Nov 9, 2018
package.json 0.1.1 Nov 9, 2018
yarn.lock Initial commit Nov 5, 2018

♻️ use-undo

undo/redo functionality with React Hooks.


Requirement ⚠️

To use useUndo, you have to use at minimum react@16.7.0-alpha.0. React Hooks is currently at RFC stage.


yarn add use-undo


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

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

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

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



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


Type: Object
Key Type Description
past Array The undo stack.
present Any The present state.
future Array The redo stack.


Type: Object
Key Type Description
set function Assign a new value to present.
undo function See handling-undo.
redo function See handling-redo.
canUndo boolean Check whether state.undo.length is 0.
canRedo boolean Check whether state.redo.length is 0.

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


MIT © xxhomey19