Undo/redo functionality with React Hooks

January 16, 2019 0 Comments

Undo/redo functionality with React Hooks

 

 

Undo/redo functionality with React Hooks

React Hooks to implement Undo and Redo functionality.

Requirement ⚠️

To use useUndo, you have to use at minimum [email protected]. React Hooks is currently at RFC stage.

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.

GitHub



Tag cloud