{"id":16630339,"url":"https://github.com/yamankatby/react-localstorage-helper","last_synced_at":"2026-03-07T02:32:37.321Z","repository":{"id":47506563,"uuid":"177771547","full_name":"yamankatby/react-localstorage-helper","owner":"yamankatby","description":"Cleaner LocalStorage usage by using hooks ⚓ and callback functions 🔉","archived":false,"fork":false,"pushed_at":"2021-08-26T11:28:39.000Z","size":1534,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-23T07:21:00.538Z","etag":null,"topics":["callback-functions","hooks","localstorage","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/yamankatby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T11:07:28.000Z","updated_at":"2021-08-30T08:08:24.000Z","dependencies_parsed_at":"2022-08-31T03:30:59.219Z","dependency_job_id":null,"html_url":"https://github.com/yamankatby/react-localstorage-helper","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/yamankatby/react-localstorage-helper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-localstorage-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-localstorage-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-localstorage-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-localstorage-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamankatby","download_url":"https://codeload.github.com/yamankatby/react-localstorage-helper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-localstorage-helper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["callback-functions","hooks","localstorage","react"],"created_at":"2024-10-12T04:46:32.353Z","updated_at":"2026-03-07T02:32:37.280Z","avatar_url":"https://github.com/yamankatby.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-localstorage-helper\n\n[![Latest Stable Version](https://img.shields.io/npm/v/react-localstorage-helper.svg)](https://www.npmjs.com/package/react-localstorage-helper)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-localstorage-helper.svg)](https://www.npmjs.com/package/react-localstorage-helper)\n[![GitHub issues](https://img.shields.io/github/issues-raw/yamankatby/react-localstorage-helper.svg)](https://github.com/yamankatby/react-localstorage-helper/issues)\n[![Used Languages](https://img.shields.io/github/languages/top/yamankatby/react-localstorage-helper.svg)](https://github.com/yamankatby/react-localstorage-helper/issues)\n\n## Installation\n\n\n```bash\nnpm install react-localstorage-helper --save\n```\n**Or if you're using yarn:**\n\n```\nyarn add react-localstorage-helper\n```\n\n## Getting Started\n\nAccess localStorage easily inside your React component.\n- Full support to use localStorage with new `React Hooks` ⚓.\n- Listen to changes easily just by pass a `Callback function` 🔉.\n- No need to worry about encoding data to `JSON` and decoding it back.\n\n![react-localstorage-helper Overview](https://raw.githubusercontent.com/yamankatby/react-localstorage-helper/master/overview.gif)\n\n## Usage\n\n### Function components (With Hooks) ⚓.\n\n```jsx harmony\nimport { useLocalStorage } from \"react-localstorage-helper\";\n\nconst App = () =\u003e {\n  const [name, setName] = useLocalStorage(\"__name__\", \"Somebody\");\n  const [isDark, setIsDark] = useLocalStorage(\"__isDark__\", false);\n\n  return (\n    \u003cdiv style={{ backgroundColor: isDark ? \"black\" : \"white\" }}\u003e\n      \u003ch1\u003eHello! {name}\u003c/h1\u003e\n      \u003cinput onChange={e =\u003e setName(e.currentTarget.value)} /\u003e\n\n      \u003cinput\n        type=\"checkbox\"\n        value={isDark}\n        onChange={() =\u003e setIsDark(preValue =\u003e !preValue)}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Class components (With Callback Function) 🔉.\n\n```jsx harmony\nimport { localStorage } from \"react-localstorage-helper\";\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { name: \"Somebody\", isDark: false };\n\n    this.updateName = localStorage(\"__name__\", this.state.name, newName =\u003e {\n      this.setState(newName);\n    });\n\n    this.updateIsDark = localStorage(\n      \"__isDark__\",\n      this.state.isDark,\n      newIsDark =\u003e {\n        this.setState({ isDark: newIsDark });\n      }\n    );\n  }\n\n  render() {\n    return (\n      \u003cdiv style={{ backgroundColor: isDark ? \"black\" : \"white\" }}\u003e\n        \u003ch1\u003eHello! {this.state.name}\u003c/h1\u003e\n        \u003cinput onChange={e =\u003e this.updateName(e.currentTarget.value)} /\u003e\n\n        \u003cinput\n          type=\"checkbox\"\n          value={isDark}\n          onChange={() =\u003e this.updateIsDark(preValue =\u003e !preValue)}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Documentation\n\n**Class component:**\n\n```js\nthis.updateValue = localStorage(key, initialValue, onValueChange);\n```\n\n`localStorage` function returns a function to update the value in the localStorage and triggers `onValueChange` callback function.\n\n**Function component:**\n\n```js\nconst [value, setValue] = useLocalStorage(key, initialValue);\n```\n\n`useLocalStorage()` Hook returns a stateful value, and a function to update it.\n\nDuring the initial render, the returned value (`value`) will be the same as the value passed as the secound argument (`initialState`) if there is no data stored in the localStorage.\n\n### Lazy initial value\n\nThe `initialValue` argument is the value used during the initial render if there is no stored value in the localStorage. In subsequent renders, it is disregarded. If the initial value is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:\n\n**Class component:**\n\n```js\nthis.updateValue = localStorage(\n  \"__key__\",\n  () =\u003e {\n    const initialValue = someExpensiveComputation(props);\n    return initialValue;\n  },\n  this.handleValueChange\n);\n```\n\n**Function component:**\n\n```js\nconst [value, setValue] = useLocalStorage(\"__key__\", () =\u003e {\n  const initialValue = someExpensiveComputation(props);\n  return initialValue;\n});\n```\n\n### Functional updates\nIf the new value is computed using the previous value, you can pass a function to `setValue`. The function will receive the previous value, and return an updated value. Here’s an example:\n\n**Class component:**\n\n```js\nthis.updateTheme = localStorage(\"__theme__\", \"light\", this.handleValueChange);\nthis.updateTheme(prevValue =\u003e (prevTheme === \"light\" ? \"dark\" : \"light\"));\n```\n\n**Function component:**\n\n```js\nconst [them, setTheme] = useLocalStorage(\"__theme__\", \"light\");\nonToggleTheme = () =\u003e\n  setTheme(prevTheme =\u003e (prevTheme === \"light\" ? \"dark\" : \"light\"));\n```\n## Authors\n\n* **Yaman KATBY** - *Initial work* - [Website](https://yaman.idewaxa.com/)\n\nSee also the list of [contributors](https://github.com/yamankatby/redux-immutable-helper/contributors) who participated in this project.\n\n## License\n\nThis library is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamankatby%2Freact-localstorage-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamankatby%2Freact-localstorage-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamankatby%2Freact-localstorage-helper/lists"}