Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jul 12, 2019
Nov 27, 2018
Nov 5, 2018
Oct 9, 2019
Sep 1, 2019

README.md

♻️ use-undo

undo/redo functionality with React Hooks.

screensho

Installation

yarn add use-undo

Usage

Edit 5v9yoz7xn4
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
Key Type Description
past Array The undo stack.
present Any The present state.
future Array The redo stack.

actions

Type: Object
Key Type Description
set function Assign a new value to present.
reset function Clear past array and future array. 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

License

MIT © homerchen19

About

React Hooks to implement Undo and Redo functionality

Topics

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.