https://github.com/marcbouchenoire/use-merge-state
🗜️ A useState variant hook that merges updates from arrays, plain objects, maps or sets.
https://github.com/marcbouchenoire/use-merge-state
hook merge react rest spread state
Last synced: 9 months ago
JSON representation
🗜️ A useState variant hook that merges updates from arrays, plain objects, maps or sets.
- Host: GitHub
- URL: https://github.com/marcbouchenoire/use-merge-state
- Owner: marcbouchenoire
- License: mit
- Created: 2020-12-27T10:48:04.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-24T13:30:05.000Z (over 1 year ago)
- Last Synced: 2025-10-05T16:52:21.154Z (9 months ago)
- Topics: hook, merge, react, rest, spread, state
- Language: TypeScript
- Homepage: https://npm.im/use-merge-state
- Size: 1.17 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-merge-state
🗜️ A `useState` variant hook that merges updates from arrays, plain objects, maps or sets.
[](https://github.com/marcbouchenoire/use-merge-state/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/use-merge-state)
[](https://bundlephobia.com/package/use-merge-state)
[](https://codecov.io/gh/marcbouchenoire/use-merge-state)
[](https://github.com/marcbouchenoire/use-merge-state/blob/main/LICENSE)
- 📚 **Simple**: A drop-in `useState` replacement
- 🗜️ **Tiny**: Just around **600 bytes** on modern platforms
- 🧪 **Reliable**: Fully tested with [100% code coverage](https://codecov.io/gh/marcbouchenoire/use-merge-state)
- 📦 **Typed**: Written in [TypeScript](https://www.typescriptlang.org/) and includes definitions out-of-the-box
- 💨 **Zero dependencies**
## Installation
```bash
npm install use-merge-state
```
## Usage
Import `useMergeState`.
```typescript
import { useMergeState } from "use-merge-state"
```
Use it as a drop-in `useState` replacement.
```typescript
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`.
```typescript
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.
```typescript
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.
```typescript
const [state, setState] = useMergeState([1, 2], {
merge: false
})
```
Setting `options` on a `setState` update will override any previously set options for this specific update.
```typescript
setState([3, 4], {
merge: true
})
```
#### `merge`
```typescript
merge?: boolean = true
```
Setting `merge` to `false` will disable merging—essentially converting `useMergeState` back into `useState`.