{"id":15470505,"url":"https://github.com/timurkr/zimmer-context","last_synced_at":"2025-10-25T04:06:50.767Z","repository":{"id":221824356,"uuid":"755497131","full_name":"TimurKr/zimmer-context","owner":"TimurKr","description":"Complex zustand slices patterns made simple with full typescript support","archived":false,"fork":false,"pushed_at":"2024-02-18T17:40:57.000Z","size":741,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T15:01:34.583Z","etag":null,"topics":["context","immer","npm","npm-package","react","zustand"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/zimmer-context","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/TimurKr.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},"funding":{"github":["el3um4s"],"patreon":"el3um4s","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/el3um4s"]}},"created_at":"2024-02-10T11:49:16.000Z","updated_at":"2024-11-15T08:23:59.000Z","dependencies_parsed_at":"2024-02-10T12:14:51.358Z","dependency_job_id":"8deeab26-1f21-46a0-960c-5f60d5d6ecd5","html_url":"https://github.com/TimurKr/zimmer-context","commit_stats":null,"previous_names":["timurkr/zimmer-context"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimurKr%2Fzimmer-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimurKr%2Fzimmer-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimurKr%2Fzimmer-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimurKr%2Fzimmer-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimurKr","download_url":"https://codeload.github.com/TimurKr/zimmer-context/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249995617,"owners_count":21357959,"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","immer","npm","npm-package","react","zustand"],"created_at":"2024-10-02T02:05:10.033Z","updated_at":"2025-10-25T04:06:45.726Z","avatar_url":"https://github.com/TimurKr.png","language":"TypeScript","readme":"# Complex zustand slices patterns made simple with full typescript support\n\n## Getting Started\n\nInstall the package with\n\n```bash\nnpm install zimmer-context\n```\n\n## Using the package\n\nIt is dead simple, this library provides only 2 functions:\n\n- `createStoreSlice` to define your slices\n- `createGlobalStoreContext` to use your slices and get your `ContextProvider` and `useStoreContext` hook to use the store\n\nI felt there was too much boilerplate when using zustand with immer and persist, especially as my projects grew, so I created this package. Everything is fully typed and as simple as possible.\n\n### 1. Creating slices\n\nCreate a file `store/fishSlice.ts`, where you define your slice with `createStoreSlice`. First define your state and actions. then inside the createStoreSlice define the default values and the functions. you have access to set and get fucnctions to retrieve and manipulate with the data in this slice. You cannot access data in another slices, as at the time of defining your slice, typescript doesn't know aobut the structure of other slices.\n\n```typescript\nimport { createStoreSlice } from \"zimmer-context\";\n\ntype FishState = {\n  count: number;\n};\n\ntype FishActions = {\n  increment: (qty: number) =\u003e void;\n  decrement: (qty: number) =\u003e void;\n};\n\nexport const fishSlice = createStoreSlice\u003cFishState, FishActions\u003e(\n  (set, get) =\u003e ({\n    count: 0,\n    increment: (qty: number) =\u003e set((state) =\u003e ({ count: state.count + qty })),\n    decrement: (qty: number) =\u003e set((state) =\u003e ({ count: state.count - qty })),\n  })\n);\n```\n\nand another `store/bearSlice.ts` slice like so:\n\n```typescript\nimport { createStoreSlice } from \"zimmer-context\";\n\ntype BearState = {\n  count: number;\n};\n\ntype BearActions = {\n  increment: (qty: number) =\u003e void;\n  decrement: (qty: number) =\u003e void;\n};\n\nexport const bearSlice = createStoreSlice\u003cBearState, BearActions\u003e(\n  (set, get) =\u003e ({\n    count: 0,\n    increment: (qty: number) =\u003e set((state) =\u003e ({ count: state.count + qty })),\n    decrement: (qty: number) =\u003e set((state) =\u003e ({ count: state.count - qty })),\n  })\n);\n```\n\n### 2. Create your global store using slices\n\nIn another file (say `store/global_store.ts`) import all of the slices and create the global store:\n\n```typescript\n\"use client\";\n\nimport { createGlobalStoreContext } from \"zimmer-context\";\nimport { bearSlice } from \"./bear_slice\";\nimport { fishSlice } from \"./fish_slice\";\n\nexport const { ContextProvider, useStoreContext } = createGlobalStoreContext(\n  {\n    fish: fishSlice,\n    bear: bearSlice,\n  },\n  {\n    persist: {\n      // Do not specify to not use persist\n      version: 1, // Persist version, change whenever there is a breaking change in the structure of the store\n    },\n  }\n);\n```\n\n### 3. Provide the context with `ContextProvider`\n\nHere you can override the initial store state with your data, such as fetched one, or from URL search parameters.\n\n```typescript\nimport { ContextProvider } from \"store/global_store\";\n\nexport default async function ReactComponent({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    \u003cContextProvider\n      initStoreState={{\n        fish: { count: 10 },\n      }}\n    \u003e\n      {children}\n    \u003c/ContextProvider\u003e\n  );\n}\n```\n\n### 4. Use the store with `useStoreContext`\n\nInside the ContextProvider you can get the state like so:\n\n```typescript\nimport { useStoreContext } from \"store/global_store\";\n\nexport default async function DisplayCounts() {\n  const { fish, bear } = useStoreContext((state) =\u003e state);\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003efish: {fish.count}\u003c/div\u003e\n      \u003cdiv\u003ebear: {bear.count}\u003c/div\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          fish.decrement(1);\n        }}\n      \u003e\n        Bear eats fish\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Contributing\n\nFeel free to open issues and contribute by creating pull requests! I am open to any and all suggestions.\n","funding_links":["https://github.com/sponsors/el3um4s","https://patreon.com/el3um4s","https://www.paypal.me/el3um4s"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimurkr%2Fzimmer-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimurkr%2Fzimmer-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimurkr%2Fzimmer-context/lists"}