{"id":13492864,"url":"https://github.com/donavon/use-persisted-state","last_synced_at":"2025-04-13T02:00:04.294Z","repository":{"id":41142585,"uuid":"169592266","full_name":"donavon/use-persisted-state","owner":"donavon","description":"A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.","archived":false,"fork":false,"pushed_at":"2023-04-26T18:53:55.000Z","size":387,"stargazers_count":1381,"open_issues_count":45,"forks_count":96,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2025-04-13T01:59:57.635Z","etag":null,"topics":["custom-hook","hooks","localstorage","persistence","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/donavon.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}},"created_at":"2019-02-07T15:18:41.000Z","updated_at":"2025-03-24T01:47:48.000Z","dependencies_parsed_at":"2024-01-13T19:21:49.616Z","dependency_job_id":"7989300e-715f-4836-8ad4-d0b6b44bf32b","html_url":"https://github.com/donavon/use-persisted-state","commit_stats":{"total_commits":32,"total_committers":8,"mean_commits":4.0,"dds":0.375,"last_synced_commit":"2a33963050b209f8cc27060a32109978414a4dc7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-persisted-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-persisted-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-persisted-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Fuse-persisted-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/use-persisted-state/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654046,"owners_count":21140235,"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":["custom-hook","hooks","localstorage","persistence","react","reactjs"],"created_at":"2024-07-31T19:01:09.956Z","updated_at":"2025-04-13T02:00:04.274Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","funding_links":[],"categories":["react","JavaScript"],"sub_categories":[],"readme":"# use-persisted-state\n\nA custom [React Hook](https://reactjs.org/docs/hooks-overview.html) that provides a multi-instance,\nmulti-tab/browser shared and persistent state.\n\n[![npm version](https://badge.fury.io/js/use-persisted-state.svg)](https://badge.fury.io/js/use-persisted-state) [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)\n\n\n`use-persisted-state` is not a hook itself, but is a factory that accepts a storage `key`\nand an optional storage provider (default = `localStorage`) and returns a hook\nthat you can use as a direct replacement for `useState`.\n\n## Features\n\n💾 Persists the state to `localStorage`\n\n🖥 Syncs between tabs and/or browser windows\n\n📑 Shares state w/multiple hooks on a page\n\n## Requirement\n\nTo use `use-persisted-state`, you must use `react@16.8.0` or greater which includes Hooks.\n\n## Installation\n\n```sh\n$ npm i use-persisted-state\n```\n\n## Example\n\nLet's take a look at how you can use `use-persisted-state`.\nHere we have an example of a typical up/down counter.\n\n```js\nimport { useState } from 'react';\n\nconst useCounter = initialCount =\u003e {\n  const [count, setCount] = useState(initialCount);\n\n  return {\n    count,\n    increment: () =\u003e setCount(currentCount =\u003e currentCount + 1),\n    decrement: () =\u003e setCount(currentCount =\u003e currentCount - 1),\n  };\n};\n\nexport default useCounter;\n```\n\nLet's replace the import of `react` with an import from `use-persisted-state`.\nAnd we'll call `createPersistedState` (the factory function).\nThis will return a `useCounterState` hook that we can use in place of `useState`.\n\nThe complete code is as follows.\n\n```js\nimport createPersistedState from 'use-persisted-state';\nconst useCounterState = createPersistedState('count');\n\nconst useCounter = initialCount =\u003e {\n  const [count, setCount] = useCounterState(initialCount);\n\n  return {\n    count,\n    increment: () =\u003e setCount(currentCount =\u003e currentCount + 1),\n    decrement: () =\u003e setCount(currentCount =\u003e currentCount - 1),\n  };\n};\n\nexport default useCounter;\n```\n\nThe state is shared with any other hook using the same key, either\non the same page, across tabs, or even browser windows.\n\nFor example, open two copies of your app in two tabs or even two windows.\nAny changes to state in one tab will be rendered on the other tab.\n\nYou can also close the browser and the next time you run your app,\nthe state will be rendered as it was before you closed your browser.\n\n## License\n\n**[MIT](LICENSE)** Licensed\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://donavon.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/887639?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonavon West\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#infra-donavon\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=donavon\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#example-donavon\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-donavon\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"#maintenance-donavon\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/donavon/use-persisted-state/pulls?q=is%3Apr+reviewed-by%3Adonavon\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#tool-donavon\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=donavon\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/karol-majewski\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/20233319?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKarol Majewski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=karol-majewski\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/dispix\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/11643701?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOctave Raimbault\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=dispix\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://morello.dev\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/19588613?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDennis Morello\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=dennismorello\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://fdetry.be\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/3214565?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFlorent\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=Fridus\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mungojam\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/3154635?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMark Adamson\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=mungojam\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://vitordino.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/5063967?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVitor Dino\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/donavon/use-persisted-state/commits?author=vitordino\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fuse-persisted-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Fuse-persisted-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Fuse-persisted-state/lists"}