https://github.com/igoodie/make-reactive
⚜️ Turn any JS object into a legit reactive React hook! Because useState(new Map()) is a crime.
https://github.com/igoodie/make-reactive
array es6-map es6-set hook javascript react reactive reactivity state typescript
Last synced: 3 months ago
JSON representation
⚜️ Turn any JS object into a legit reactive React hook! Because useState(new Map()) is a crime.
- Host: GitHub
- URL: https://github.com/igoodie/make-reactive
- Owner: iGoodie
- License: cc-by-sa-4.0
- Created: 2023-10-05T15:56:13.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2026-02-27T12:05:46.000Z (4 months ago)
- Last Synced: 2026-02-27T17:10:32.530Z (3 months ago)
- Topics: array, es6-map, es6-set, hook, javascript, react, reactive, reactivity, state, typescript
- Language: TypeScript
- Homepage: https://igoodie.github.io/make-reactive/
- Size: 550 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Make your objects talk to React — automatically
# Description
This library allows you to create React hooks for arbitrary JavaScript objects, making them seamlessly reactive — without rewriting your data structure or wrapping everything in state.
It’s the perfect way to bring reactivity to data types like Map, Set, or even your custom objects — and only trigger rerenders when necessary.
# How to use?
1. Use your favorite package manager to install as dependency
```bash
npm i @igoodie/make-reactive --save-dev
# or
yarn add @igoodie/make-reactive
# or
pnpm add @igoodie/make-reactive
```
2. Start using supported out-of-the-box hooks
```tsx
import {
useReactiveArray,
useReactiveMap,
useReactiveSet,
} from "@igoodie/make-reactive";
export function MyComponent() {
const array = useReactiveArray();
const map = useReactiveMap();
const set = useReactiveSet();
return (
<>
{array.length}
array.push(99)}>
Reactive Array::push, will trigger rerender!
{map.size}
map.set("Hey!", 99)}>
Reactive Map::set, will trigger rerender!
{set.size}
set.add(99)}>
Reactive Set::add, will trigger rerender!
>
);
}
```
3. Or craft your own Reactive object, if you'd like to!
```ts
// src/entities/Player.ts
export class Player {
_alive = true;
_health = 100;
_equipment = null;
get health() {
return this._health;
}
damage(quantity: number) {
this._health -= quantity;
if (this._health <= 0) this._alive = false;
}
equip(item: Item) {
if (this._equipment === item) return false;
this._equipment = item;
return true;
}
}
```
```ts
// src/hooks/usePlayer.ts
import makeReactive from "@igoodie/make-reactive";
export const usePlayer = makeReactive(
(player: Player) => player,
(forceRerender) => ({
damage: true, // <-- Automatically makes every call reactive
equip(self, item) {
const result = self.equip(item);
if (result) forceRerender(); // <-- Only makes successful "equipment" results rerender
return result;
},
})
);
```
# How does it work under the hood?
The `makeReactive` function uses a combination of React hooks, JavaScript Proxies, and method interception to turn mutable objects like Map, Set, and Array into reactive data sources that trigger rerenders in React.
Here's the breakdown of how it works:
1. **Proxy Wrapping:**
The object returned by your initiator (e.g., a new Map() or new Array()) is wrapped in a Proxy. This lets us intercept get calls (i.e., property or method accesses).
2. **Method Hooking:**
When a method is accessed, such as `.set()` on a `Map`, the proxy checks if a hook is defined for it:
- If value `true` is specified, the method is automatically wrapped to call forceUpdate() after execution.
- If a custom function is provided, it is executed instead, giving you fine-grained control over how and when rerenders are triggered.
3. **Rerendering:**
A simple `const [, forceUpdate] = useState(0)` is used to force rerenders. When `forceUpdate(i => i + 1)` is called, it increments the state value, triggering React to update the component.
4. **Memoization & Efficiency:**
Methods are only wrapped once, using a Map to cache wrapped versions. This avoids redundant closures and improves runtime efficiency.
This design allows you to write minimal glue code while keeping full control over reactivity and performance.
## License
© 2024 Taha Anılcan Metinyurt (iGoodie)
For any part of this work for which the license is applicable, this work is licensed under the [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/) license. (See LICENSE).
