{"id":21490061,"url":"https://github.com/tasoskakour/use-persisted-reducer","last_synced_at":"2026-05-21T07:41:30.844Z","repository":{"id":57683956,"uuid":"471707147","full_name":"tasoskakour/use-persisted-reducer","owner":"tasoskakour","description":"🎇 Enhance useReducer with persistence to local/session storage (with TTL support).","archived":false,"fork":false,"pushed_at":"2022-04-19T18:41:03.000Z","size":1548,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-04T15:02:38.575Z","etag":null,"topics":["localstorage","react","react-hooks"],"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/tasoskakour.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}},"created_at":"2022-03-19T13:43:01.000Z","updated_at":"2022-06-21T14:03:35.000Z","dependencies_parsed_at":"2022-09-10T15:01:39.571Z","dependency_job_id":null,"html_url":"https://github.com/tasoskakour/use-persisted-reducer","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasoskakour%2Fuse-persisted-reducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasoskakour%2Fuse-persisted-reducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasoskakour%2Fuse-persisted-reducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasoskakour%2Fuse-persisted-reducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tasoskakour","download_url":"https://codeload.github.com/tasoskakour/use-persisted-reducer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244022714,"owners_count":20385134,"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":["localstorage","react","react-hooks"],"created_at":"2024-11-23T14:30:27.970Z","updated_at":"2026-05-21T07:41:30.811Z","avatar_url":"https://github.com/tasoskakour.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @tasoskakour/use-persisted-reducer\n\n![gh workflow](https://img.shields.io/github/workflow/status/tasoskakour/use-persisted-reducer/CI%20\u0026%20CD) [![npm](https://img.shields.io/npm/v/@tasoskakour/use-persisted-reducer.svg?style=svg\u0026logo=npm\u0026label=)](https://www.npmjs.com/package/@tasoskakour/use-persisted-reducer)\n\n\n\u003e A custom React hook that provides multi tab/browser persistent state. With TTL support.\n\n`use-persisted-reducer` is actually a function that accepts a `key`, an optional storage provider (defaults to `window.localStorage`) and an optional `ttl` parameter and returns a React hook with identical API as the classic _useReducer_.\n\n## Features\n\n- Persists the reducer's state to localStorage or sessionStorage.\n- Automatically syncs state between tabs and/or browser windows.\n- Shares state between multiple hooks on a page.\n- Provides TTL support.\n\n## Install\n\n_Requires `react@16.8.0` or higher that includes hooks._\n\n```console\nyarn add @tasoskakour/use-persisted-reducer\n```\n\nor\n\n```console\nnpm i @tasoskakour/use-persisted-reducer\n```\n\n## Example\n\nLet's take a look at a standard counter example. As you'll see the created hook has **identical API** with the standard React's _useReducer_ hook.\n\n```js\nimport createPersistedReducer from \"@tasoskakour/use-persisted-reducer\";\n\nconst useCounterPersistedReducer = createPersistedReducer(\"COUNTER\", {\n  storage: window.localStorage, // or window.sessionStorage (defaults to localStorage)\n  ttl: 10 // optional ttl in seconds\n});\n\nconst reducer = (state, action): State =\u003e {\n  // your counter reducer...\n};\n\nconst INITIAL_STATE = {\n  // initial state...\n};\n\n// And then use it as you would normally use the basic React's useReducer hook\nconst App = () =\u003e {\n  const [state, dispatch] = useCounterPersistedReducer(reducer, INITIAL_STATE);\n  // or const [state, dispatch] = useCounterPersistedReducer(reducer, someArgument, someInitFunction);\n\n  const { counter } = state;\n  return (\n    \u003cdiv\u003e\n      Counter's value: {counter}\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"INCREASE\" })}\u003eIncrease\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: \"DECREASE\" })}\u003eIncrease\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\n// Example taken from: https://reactjs.org/docs/hooks-reference.html#usereducer\n```\n\n## API\n\n**- function createPersistedReducer (key, options): usePersistedReducer**\n\nParameters:\n- `key` (string): The localStorage/sessionStorage key that the data will be written to.\n- `options?` (Object): \n    - `storage?` (Storage): Can be localStorage/sessionStorage or whatever storage you prefer. Optional - defaults to `window.localStorage`\n    - `ttl?` (number): Expressed in seconds and represents when the data in the storage will be considered stale. Optional - defaults to null which means there is no TTL so the persisted data will never be considered expired.\n\nReturns:\n- `usePersistedReducer` (Function): The returned function is a hook which can be used with the same API as the classic React's useReducer hook. See [Example](#example)\n    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasoskakour%2Fuse-persisted-reducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftasoskakour%2Fuse-persisted-reducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasoskakour%2Fuse-persisted-reducer/lists"}