Repository files navigation

A utility to add undo and redo functionality to any state managed through a reducer.This librarydoes not requireredux.If you're looking for something that adds undo and redo to a state that is managed throughredux you might be in the wrong place.

Throughyarn.

yarn add react-undo-redo

Throughnpm

npm install --save react-undo-redo

In order to create the provider and hooks to manage undo and redo you callcreateUndoRedo and pass thereducer you'd like to enhance.This method returns a provider component and hooks to work with your state.Thereducer you pass does not need any knowledge about this feature.

import{createUndoRedo}from"react-undo-redo"const{ UndoRedoProvider, usePast, usePresent, useFuture, useUndoRedo}=createUndoRedo(reducer)

createUndoRedo also accepts an options object as a second parameter. Currently available options:

• track - function with signature(action) => boolean. It is invoked on every dispatch and defines whether the new state is avaiable for undo/redo. If function returnsfalse, the state won't affect the change history. It is useful in situations, when the change is not reflected in the UI or the user cannot control over.

import{createUndoRedo}from"react-undo-redo"const{ UndoRedoProvider, usePast, usePresent, useFuture, useUndoRedo}=createUndoRedo(reducer,{track:(action)=>action.type!=='GET_NEW_TODOS'})

functionComponent(){return(<UndoRedoProviderinitialState={0}><Counter/></UndoRedoProvider>)}

The return value of this hook mimics theuseReducer hook.You get access to the current present state.Use thedispatch method to dispatch any of your actions.

functionComponent(){const[count,dispatch]=usePresent()return(<><div>count:{count}</div><buttononClick={()=>dispatch({type:"increment"})}>Add 1</button></>)}

Returns a tuple that contains methods to signalundo orredo.If you call the two methodsreact-undo-redo updates the currentpresent state.

Important: You can also callundo orredo when there is nothing to undo or redo.However, you can check whether there is anything to undo or redo by checking theisPossible prop that is present on both methods.

functionComponent(){const[undo,redo]=useUndoRedo()return(<><buttondisabled={!undo.isPossible}onClick={()=>undo()}>        Undo</button><buttondisabled={!redo.isPossible}onClick={()=>redo()}>        Redo</button></>)}

Returns all current past states (i.e. state snapshots when actions are dispatched).You probably don't need to use this.

Returns all current future states (i.e. states that have been undone).You probably don't need to use this.