homerchen19

React Hooks to implement Undo and Redo functionality

169 Stars 5 Forks Last release: Not found MIT License 28 Commits 10 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

♻️ use-undo

Name: use-undo
Brand: use-undo
SKU: //homerchen19/use-undo
Rating: 2.1725 (169 reviews)

undo/redo functionality with React Hooks.

screensho

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

| 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

. | | canRedo |

boolean

| Check whether

state.redo.length

. |

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,
  present: ,
  future: Array
}

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

use-undo

by homerchen19