Version: Next

use-undo-state

About#

Drop in replacement for useState hook but with undo functionality.

Installation#

npm install --save @rooks/use-undo-state

Importing the hook#

import useUndoState from '@rooks/use-undo-state'

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

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