{"id":15316265,"url":"https://github.com/charkour/zustand-di","last_synced_at":"2025-04-14T19:10:33.489Z","repository":{"id":108850042,"uuid":"579164775","full_name":"charkour/zustand-di","owner":"charkour","description":"dependency injection for zustand with react context. initialize stores with component props. \u003c400 bytes","archived":false,"fork":false,"pushed_at":"2024-06-02T18:57:55.000Z","size":128,"stargazers_count":26,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T07:34:13.920Z","etag":null,"topics":["context","dependency-injection","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charkour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"github":["charkour"]}},"created_at":"2022-12-16T20:35:31.000Z","updated_at":"2025-02-28T01:51:22.000Z","dependencies_parsed_at":"2023-12-09T04:24:03.291Z","dependency_job_id":"a7dc19f9-baff-40f1-bd99-29df9cad2981","html_url":"https://github.com/charkour/zustand-di","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"dc61be020d58c057e401960b74ffb902778bab7d"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charkour%2Fzustand-di","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charkour%2Fzustand-di/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charkour%2Fzustand-di/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charkour%2Fzustand-di/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charkour","download_url":"https://codeload.github.com/charkour/zustand-di/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248758423,"owners_count":21156958,"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":["context","dependency-injection","react"],"created_at":"2024-10-01T08:53:42.146Z","updated_at":"2025-04-14T19:10:33.470Z","avatar_url":"https://github.com/charkour.png","language":"TypeScript","funding_links":["https://github.com/sponsors/charkour"],"categories":[],"sub_categories":[],"readme":"# zustand-di\n\ndependency injection for [zustand](https://github.com/pmndrs/zustand) with [react context](https://react.dev/learn/passing-data-deeply-with-context). initialize zustand stores with component props.\n\n[![Build Size](https://img.shields.io/bundlephobia/minzip/zustand-di?label=bundle%20size\u0026style=flat\u0026colorA=000000\u0026colorB=000000)](https://bundlephobia.com/result?p=zustand-di)\n[![Version](https://img.shields.io/npm/v/zustand-di?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/zustand-di)\n[![Downloads](https://img.shields.io/npm/dt/zustand-di?style=flat\u0026colorA=000000\u0026colorB=000000)](https://www.npmjs.com/package/zustand-di)\n\n## Installation\n\n```bash\nnpm install react zustand zustand-di\n```\n\n\u003e Note: `zustand-di` requires `react` and `zustand` as peer dependencies.\n\n\u003e For `zustand@4.1.0` and higher, you need `zustand-di@0.0.7` or higher.\n\n\u003e For `zustand@~4.0.0`, you need `zustand-di@0.0.6` or lower.\n\n## Usage\n\n```tsx\nimport { create } from \"zustand\";\nimport { createContext } from \"zustand-di\";\n\n// 0. (TypeScript Only) Define a store\ntype CounterState = {\n  count: number;\n  inc: () =\u003e void;\n};\n\n// 1. Create the context\nconst [Provider, useStore] = createContext\u003cCounterState\u003e();\n\n// 2. Create the store\nconst createStore = (initialState: { count: number }) =\u003e\n  create\u003cCounterState\u003e((set) =\u003e ({\n    count: initialState.count,\n    inc: () =\u003e set((state) =\u003e ({ count: state.count + 1 })),\n  }));\n\n// 3. Use the store in a child component\nfunction Counter() {\n  const { count, inc } = useStore((state) =\u003e state);\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={inc}\u003eincrement\u003c/button\u003e\n      \u003cdiv\u003ecount: {count}\u003c/div\u003e\n    \u003c\u003e\n  );\n}\n\n// 4. Use the store in the app and pass in the store creator\nconst myInitialState = { count: 5 };\n\nfunction App() {\n  return (\n    \u003cProvider createStore={() =\u003e createStore(myInitialState)}\u003e\n      \u003cCounter /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\n## Motivation\n\nThis package was originally inspired by [`createContext`](https://github.com/pmndrs/zustand/blob/main/src/context.ts) from `zustand/context` that was deprecated in v4. This package is a simplified version of that implementation:\n\n- Removes `useStoreApi` and forces the use of a selector.\n- Uses modern typescript features to simplify the code and reduce bundle size.\n- Returns an array of the Provider and `useStore` hook to reduce bundle size and improve DX.\n\nFor a detailed explanation, check out TkDoDo's [blog post](https://tkdodo.eu/blog/zustand-and-react-context).\n\n### Why is Dependency Injection useful within React?\n\n- You can pass in props to the store creator.\n  - This is useful for testing and [initializing the store with props](https://github.com/pmndrs/zustand/blob/main/docs/guides/initialize-state-with-props.md).\n  - You can also use this to create multiple instances of the same store with different props.\n\n## API\n\n### `createContext`\n\nThis is the only export from the package. It creates a context and returns a Provider and `useStore` hook.\n\n```ts\ninterface State {\n  count: number;\n}\n\nconst [Provider, useStore] = createContext\u003cState\u003e();\n```\n\n#### `Provider`\n\nThe `Provider` component is used to wrap the application and initialize the store.\n\n```tsx\n\u003cProvider createStore={createStore}\u003e\n  \u003cApp /\u003e\n\u003c/Provider\u003e\n```\n\nIf you have default props, you can pass them to the `Provider` component.\n\n```tsx\n\u003cProvider createStore={() =\u003e createStore(myInitialState)}\u003e\n  \u003cMyComponent /\u003e\n\u003c/Provider\u003e\n```\n\n#### `useStore`\n\nThe `useStore` hook is used to access the store in a child component. Be sure that the child component is wrapped in the `Provider` component.\n\n```tsx\nfunction MyComponent = () =\u003e {\n  const storeState = useStore((state) =\u003e state);\n  return \u003cdiv\u003e{storeState.count}\u003c/div\u003e;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharkour%2Fzustand-di","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharkour%2Fzustand-di","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharkour%2Fzustand-di/lists"}