{"id":14987515,"url":"https://github.com/albert-gao/auto-zustand-selectors-hook","last_synced_at":"2025-05-16T11:03:45.885Z","repository":{"id":48989315,"uuid":"374870142","full_name":"Albert-Gao/auto-zustand-selectors-hook","owner":"Albert-Gao","description":"Enjoy the performance gain of selectors without writing selectors in Zustand.","archived":false,"fork":false,"pushed_at":"2024-12-29T01:57:05.000Z","size":261,"stargazers_count":132,"open_issues_count":2,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-16T11:02:28.790Z","etag":null,"topics":["react-hooks","typescript","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Albert-Gao.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}},"created_at":"2021-06-08T03:33:12.000Z","updated_at":"2025-05-12T04:11:50.000Z","dependencies_parsed_at":"2024-12-16T06:02:21.591Z","dependency_job_id":"4f224fe3-4151-48b5-beee-45d3c0276b09","html_url":"https://github.com/Albert-Gao/auto-zustand-selectors-hook","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":"0.040000000000000036","last_synced_commit":"99728ad04c338a721e328bd178250c34e47c39a0"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Fauto-zustand-selectors-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Fauto-zustand-selectors-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Fauto-zustand-selectors-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Albert-Gao%2Fauto-zustand-selectors-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Albert-Gao","download_url":"https://codeload.github.com/Albert-Gao/auto-zustand-selectors-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518384,"owners_count":22084374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["react-hooks","typescript","zustand"],"created_at":"2024-09-24T14:14:51.774Z","updated_at":"2025-05-16T11:03:45.860Z","avatar_url":"https://github.com/Albert-Gao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# auto-zustand-selectors-hook\n\n  \u003ca href=\"https://www.npmjs.com/package/auto-zustand-selectors-hook\" alt=\"npm package\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/auto-zustand-selectors-hook?icon=npm\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/Albert-Gao/auto-zustand-selectors-hook/actions\" alt=\"combined checks\"\u003e\n    \u003cimg src=\"https://badgen.net/github/checks/albert-gao/auto-zustand-selectors-hook?label=ci\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/Albert-Gao/auto-zustand-selectors-hook\" alt=\"last commits\"\u003e\n    \u003cimg src=\"https://badgen.net/github/last-commit/albert-gao/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/Albert-Gao/auto-zustand-selectors-hook\" alt=\"licence\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/license/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://coveralls.io/github/Albert-Gao/auto-zustand-selectors-hook\" alt=\"test coverage\"\u003e\n    \u003cimg src=\"https://badgen.net/coveralls/c/github/Albert-Gao/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/auto-zustand-selectors-hook\" alt=\"types\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/types/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://bundlephobia.com/result?p=auto-zustand-selectors-hook@latest\" alt=\"minified\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/min/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://bundlephobia.com/result?p=auto-zustand-selectors-hook@latest\" alt=\"minified + gzip\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/minzip/auto-zustand-selectors-hook\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://twitter.com/albertgao\" alt=\"twitter\"\u003e\n    \u003cimg src=\"https://badgen.net/twitter/follow/albertgao\"/\u003e\n  \u003c/a\u003e\n\n**Enjoy the performance gain of selectors without writing selectors!**\n\n## Features\n\n- auto generate selectors for Zustand store (be it a value or a function)\n- Two styles available\n- Fully Typescript support (auto-completion for the generated selectors!)\n\n## Install\n\n```bash\nnpm install --save auto-zustand-selectors-hook\n```\n\nOr with yarn:\n\n```bash\nyarn add auto-zustand-selectors-hook\n```\n\n## Notice\n\nThe `v2` supports `Zustand v4`, if you are using a `Zustand v3`, please install the `v1` version\n\n```bash\nyarn add auto-zustand-selectors-hook@1.0.1\n\nnpm install --save auto-zustand-selectors-hook@1.0.1\n```\n\n## Usage\n\nLet's say you have a store like this\n\n```typescript\ninterface BearState {\n  bears: number;\n  increase: (by: number) =\u003e void;\n}\n\nconst useStoreBase = create\u003cBearState\u003e((set) =\u003e ({\n  bears: 0,\n  increase: (by) =\u003e set((state) =\u003e ({ bears: state.bears + by })),\n}));\n```\n\n\u003e **There are two types of selectors you can generate, purely function signature difference, underneath, they are all selectors.**\n\n## 1. For function style ( createSelectorFunctions )\n\n```typescript\nimport { createSelectorFunctions } from 'auto-zustand-selectors-hook';\nimport { create } from 'zustand';\n\n// wrap your store\nconst useStore = createSelectorFunctions(useStoreBase);\n\n// use it like this!\n// useStore.use.blah is a pre-generated selector, yeah!\nconst TestComponent = () =\u003e {\n  const bears = useStore.use.bears();\n  const increase = useStore.use.increase();\n\n  return (\n    \u003c\u003e\n      \u003cspan\u003e{bears}\u003c/span\u003e\n\n      \u003cbutton\n        onClick={() =\u003e {\n          increase(1);\n        }}\n      \u003e\n        +\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## 2. For hook style ( createSelectorHooks )\n\n```typescript\nimport { createSelectorHooks } from 'auto-zustand-selectors-hook';\nimport { create } from 'zustand';\n\n// wrap your store\nconst useStore = createSelectorHooks(useStoreBase);\n\n// use it like this!\n// useStore.useBlah is a pre-generated selector, yeah!\nconst TestComponent = () =\u003e {\n  const bears = useStore.useBears();\n  const increase = useStore.useIncrease();\n\n  return (\n    \u003c\u003e\n      \u003cspan\u003e{bears}\u003c/span\u003e\n\n      \u003cbutton\n        onClick={() =\u003e {\n          increase(1);\n        }}\n      \u003e\n        +\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## 3. use with middlewares\n\n\u003e You use the middleware for creating the base store, and `ALWAYS` use `auto-zustand-selectors-hooks` as a separate wrapper\n\n```typescript\nimport {\n  createSelectorHooks,\n  ZustandFuncSelectors,\n  ZustandHookSelectors,\n} from 'auto-zustand-selectors-hook';\nimport create from 'zustand';\nimport { persist } from 'zustand/middleware';\n\nconst useStoreBase = create\u003cBearState\u003e()(\n  persist((set) =\u003e ({\n    bears: 0,\n    increase: (by) =\u003e set((state) =\u003e ({ bears: state.bears + by })),\n  }))\n);\n\n// ❌ this will lost  the persist middleware type like useStore.persist\nexport const useStore = createSelectorHooks(useStoreBase);\n\n// ✅ DO this if use createSelectorFunctions()\nexport const useStore = createSelectorFunctions(\n  useStoreBase\n) as typeof useStoreBase \u0026 ZustandFuncSelectors\u003cBearState\u003e;\n\n// ✅ DO this if use createSelectorHooks()\nexport const useStore = createSelectorHooks(\n  useStoreBase\n) as typeof useStoreBase \u0026 ZustandHookSelectors\u003cBearState\u003e;\n```\n\n## License\n\nMIT © [Albert Gao](https://github.com/Albert-Gao)\n\n## Credits\n\nIt all starts from my [feature request](https://github.com/pmndrs/zustand/issues/400)\nThanks [dai-shi](https://github.com/dai-shi) for the initial implementation and ideas of API.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gao%2Fauto-zustand-selectors-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbert-gao%2Fauto-zustand-selectors-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gao%2Fauto-zustand-selectors-hook/lists"}