use-merge-state
v1.3.1
Published
A useState variant hook that merges updates.
Downloads
67
Maintainers
Readme
use-merge-state
🗜️ A useState
variant hook that merges updates from arrays, plain objects, maps or sets.
Installation
Skypack
import { useMergeState } from "https://cdn.skypack.dev/use-merge-state"
Yarn
yarn add use-merge-state
npm
npm install use-merge-state
Usage
Import useMergeState
.
import { useMergeState } from "use-merge-state"
Use it as a drop-in useState
replacement.
const [state, setState] = useMergeState([1, 2])
// state: [1, 2]
Setting arrays, plain objects, maps or sets will merge them with the current state instead of overriding it. Other types will be overridden similarly to useState
.
setState([3, 4])
// state: [1, 2, 3, 4]
Returning a functional update will run as expected and its result will then be merged with the current state.
setState((previousState) =>
previousState.map((previousNumber) => previousNumber * 2)
)
// state: [1, 2, 3, 4, 2, 4, 6, 8]
Options
A secondary options
argument can be set either on instances, updates or both to tweak the behavior of useMergeState
.
Setting options
on a useMergeState
instance will set options for all setState
updates of this instance.
const [state, setState] = useMergeState([1, 2], {
merge: false
})
Setting options
on a setState
update will override any previously set options for this specific update.
setState([3, 4], {
merge: true
})
merge
merge?: boolean = true
Setting merge
to false
will disable merging—essentially converting useMergeState
back into useState
.