Skip to main content
Version: 5.0.3

useUndoState

About#

Drop in replacement for useState hook but with undo functionality.

Installation#

npm install --save rooks

Importing the hook#

import { useUndoState } from 'rooks';

Usage#

const Demo = () => {
const [value, setValue, undo] = useUndoState(0);
return (
<div>
<span>Current value: {value}</span>
<button onClick={() => setValue(value + 1)}>Increment</button>
<button onClick={undo}>Undo</button>
</div>
);
};
render(<Demo />);

You can pass any kind of value to hook just like React's own useState.

const Demo = () => {
const [value, setValue, undo] = useUndoState({ data: 42 });
return (
<div>
<span>Current value: {value}</span>
<button onClick={() => setValue({ data: value.data + 1 })}>
Increment object data
</button>
<button onClick={undo}>Undo</button>
</div>
);
};
render(<Demo />);

Setter function can also be used with callback just like React's own useState.

const [value, setValue, undo] = useUndoState({ data: 42 })
() => setValue(current => current + 1)
const Demo = () => {
const [value, setValue, undo] = useUndoState(0);
return (
<div>
<span>Current value: {value}</span>
<button onClick={() => setValue((current) => current + 1)}>
Increment
</button>
<button onClick={undo}>Undo</button>
</div>
);
};
render(<Demo />);

To preserve memory you can limit number of steps that will be preserved in undo history.

const [value, setValue, undo] = useUndoState(0, { maxSize: 30 });
// now when calling undo only last 30 changes to the value will be preserved

Arguments#

ArgumentsTypeDescriptionDefault value
initialValuebooleanInitial value of the statefalse
OptionsObjectAn options object for the hook{maxSize: 100}

Note: The second argument is an options object which currently accepts a maxSize which governs the maximum number of previous states to keep track of.

Returned array items#

Returned Array itemsTypeDescription
valueAnyCurrent value
setValuefunctionSetter function to update value
undofunctionUndo state value

Codesandbox Example#

Basic usage#

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5