{"id":28317845,"url":"https://github.com/igoodie/make-reactive","last_synced_at":"2026-03-01T12:35:12.075Z","repository":{"id":291162110,"uuid":"700949899","full_name":"iGoodie/make-reactive","owner":"iGoodie","description":"⚜️ Turn any JS object into a legit reactive React hook! Because useState(new Map()) is a crime.","archived":false,"fork":false,"pushed_at":"2026-02-27T12:05:46.000Z","size":563,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-27T17:10:32.530Z","etag":null,"topics":["array","es6-map","es6-set","hook","javascript","react","reactive","reactivity","state","typescript"],"latest_commit_sha":null,"homepage":"https://igoodie.github.io/make-reactive/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iGoodie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-05T15:56:13.000Z","updated_at":"2026-02-27T12:05:51.000Z","dependencies_parsed_at":"2025-06-24T15:38:06.573Z","dependency_job_id":"fa072294-64c9-4138-94dc-86f57a62e911","html_url":"https://github.com/iGoodie/make-reactive","commit_stats":null,"previous_names":["igoodie/make-reactive"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/iGoodie/make-reactive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fmake-reactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fmake-reactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fmake-reactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fmake-reactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iGoodie","download_url":"https://codeload.github.com/iGoodie/make-reactive/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fmake-reactive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29969251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T11:43:06.159Z","status":"ssl_error","status_checked_at":"2026-03-01T11:43:03.887Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","es6-map","es6-set","hook","javascript","react","reactive","reactivity","state","typescript"],"created_at":"2025-05-25T06:13:42.543Z","updated_at":"2026-03-01T12:35:07.535Z","avatar_url":"https://github.com/iGoodie.png","language":"TypeScript","funding_links":["https://www.patreon.com/iGoodie"],"categories":[],"sub_categories":[],"readme":"\u003c!-- Logo --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/make-reactive/master/.github/assets/logo.svg\" height=\"200px\" alt=\"Logo\"/\u003e\n\u003c/p\u003e\n\n\u003c!-- Slogan --\u003e\n\u003cp align=\"center\"\u003e\n   Make your objects talk to React — automatically\n\u003c/p\u003e\n\u003c!-- Badges --\u003e\n\u003cp align=\"center\"\u003e\n\n  \u003c!-- Main Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/main-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@igoodie/make-reactive\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@igoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/make-reactive/tags\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/tag/iGoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/make-reactive\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/top/iGoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n\n  \u003cbr/\u003e\n\n  \u003c!-- Github Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/github-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://github.com/iGoodie/make-reactive/commits/master\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/last-commit/iGoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/make-reactive/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/iGoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/make-reactive/tree/master/src\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/code-size/iGoodie/make-reactive\"/\u003e\n  \u003c/a\u003e\n\n  \u003cbr/\u003e\n\n  \u003c!-- Support Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/support-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://discord.gg/KNxxdvN\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/610497509437210624?label=discord\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.patreon.com/iGoodie\"\u003e\n    \u003cimg src=\"https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.vercel.app%2Fapi%3Fusername%3DiGoodie%26type%3Dpatrons\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Description\n\nThis 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.\n\nIt’s the perfect way to bring reactivity to data types like Map, Set, or even your custom objects — and only trigger rerenders when necessary.\n\n# How to use?\n\n1. Use your favorite package manager to install as dependency\n\n```bash\nnpm i @igoodie/make-reactive --save-dev\n# or\nyarn add @igoodie/make-reactive\n# or\npnpm add @igoodie/make-reactive\n```\n\n2. Start using supported out-of-the-box hooks\n\n```tsx\nimport {\n  useReactiveArray,\n  useReactiveMap,\n  useReactiveSet,\n} from \"@igoodie/make-reactive\";\n\nexport function MyComponent() {\n  const array = useReactiveArray\u003cnumber\u003e();\n  const map = useReactiveMap\u003cstring, number\u003e();\n  const set = useReactiveSet\u003cnumber\u003e();\n\n  return (\n    \u003c\u003e\n      \u003cspan\u003e{array.length}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e array.push(99)}\u003e\n        Reactive Array::push, will trigger rerender!\n      \u003c/button\u003e\n\n      \u003cspan\u003e{map.size}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e map.set(\"Hey!\", 99)}\u003e\n        Reactive Map::set, will trigger rerender!\n      \u003c/button\u003e\n\n      \u003cspan\u003e{set.size}\u003c/span\u003e\n      \u003cbutton onClick={() =\u003e set.add(99)}\u003e\n        Reactive Set::add, will trigger rerender!\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n3. Or craft your own Reactive object, if you'd like to!\n\n```ts\n// src/entities/Player.ts\n\nexport class Player {\n  _alive = true;\n  _health = 100;\n  _equipment = null;\n\n  get health() {\n    return this._health;\n  }\n\n  damage(quantity: number) {\n    this._health -= quantity;\n    if (this._health \u003c= 0) this._alive = false;\n  }\n\n  equip(item: Item) {\n    if (this._equipment === item) return false;\n    this._equipment = item;\n    return true;\n  }\n}\n```\n\n```ts\n// src/hooks/usePlayer.ts\n\nimport makeReactive from \"@igoodie/make-reactive\";\n\nexport const usePlayer = makeReactive(\n  (player: Player) =\u003e player,\n  (forceRerender) =\u003e ({\n    damage: true, // \u003c-- Automatically makes every call reactive\n\n    equip(self, item) {\n      const result = self.equip(item);\n      if (result) forceRerender(); // \u003c-- Only makes successful \"equipment\" results rerender\n      return result;\n    },\n  })\n);\n```\n\n# How does it work under the hood?\n\nThe `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.\n\nHere's the breakdown of how it works:\n\n1. **Proxy Wrapping:**\n   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).\n\n2. **Method Hooking:**\n   When a method is accessed, such as `.set()` on a `Map`, the proxy checks if a hook is defined for it:\n\n   - If value `true` is specified, the method is automatically wrapped to call forceUpdate() after execution.\n\n   - If a custom function is provided, it is executed instead, giving you fine-grained control over how and when rerenders are triggered.\n\n3. **Rerendering:**\n   A simple `const [, forceUpdate] = useState(0)` is used to force rerenders. When `forceUpdate(i =\u003e i + 1)` is called, it increments the state value, triggering React to update the component.\n\n4. **Memoization \u0026 Efficiency:**\n   Methods are only wrapped once, using a Map to cache wrapped versions. This avoids redundant closures and improves runtime efficiency.\n\nThis design allows you to write minimal glue code while keeping full control over reactivity and performance.\n\n## License\n\n\u0026copy; 2024 Taha Anılcan Metinyurt (iGoodie)\n\nFor 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).\n\n\u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/4.0/88x31.png\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figoodie%2Fmake-reactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figoodie%2Fmake-reactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figoodie%2Fmake-reactive/lists"}