useUndo
Description#
Undo or Redo functionality.
API (click to expand)
const [state, actions] = useUndo(initialState);state (Object)#
| Key | Type | Description |
|---|---|---|
past | Array | The undo array |
present | Any | The present state |
future | Array | The redo array |
actions (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 | Assign value that was assigned on step earlier |
redo | function | Assign value that was assigned one step in the future |
canUndo | boolean | Check if there are values in the past |
canRedo | boolean | Check if there are values in the future |
Usage#
import { useUndo } from '@springtree/eva-suite-react-hooks';
const Example = () => { 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> );};
export default Example;