♻️ 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 (
    

      
You clicked {presentCount} times
       setCount(presentCount + 1)}>
        +
      
       setCount(presentCount - 1)}>
        -
      
      
        undo
      
      
        redo
      
       resetCount(0)}>
        reset to 0
      
    
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);

API

useUndo

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

state

Type:

Object

| Key | Type | Description | | ------- | :-----: | ------------------ | | past |

Array

Any

Array

actions

Type:

Object

| Key | Type | Description | | ------- | :--------: | ------------------------------------------------------------------------------------------ | | set |

function

present

function

past

future

present

function

function

boolean

state.undo.length

0

boolean

state.redo.length

0

How does it work?

Refer to Redux Implementing Undo History,

use-undo

useReducer

{
  past: Array,
  present: ,
  future: Array
}

It stores all states we need. To operate on this state, there are three functions in

actions

set

undo

redo

Related repo

• omnidan/redux-undo

License

MIT © homerchen19