{"id":13422530,"url":"https://github.com/STRML/react-localstorage","last_synced_at":"2025-03-15T12:30:42.026Z","repository":{"id":16997145,"uuid":"19760252","full_name":"STRML/react-localstorage","owner":"STRML","description":"Simple componentized localstorage implementation for Facebook's React.","archived":false,"fork":false,"pushed_at":"2023-01-05T16:17:12.000Z","size":1138,"stargazers_count":289,"open_issues_count":13,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-08T08:13:25.797Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/STRML.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2014-05-14T00:05:44.000Z","updated_at":"2024-10-06T12:00:12.000Z","dependencies_parsed_at":"2022-09-26T21:12:14.147Z","dependency_job_id":null,"html_url":"https://github.com/STRML/react-localstorage","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2Freact-localstorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2Freact-localstorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2Freact-localstorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2Freact-localstorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/STRML","download_url":"https://codeload.github.com/STRML/react-localstorage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730951,"owners_count":20338745,"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":[],"created_at":"2024-07-30T23:00:47.157Z","updated_at":"2025-03-15T12:30:41.736Z","avatar_url":"https://github.com/STRML.png","language":"JavaScript","readme":"React-LocalStorage\n==================\n\nSimply synchronize a component's state with `localStorage`, when available.\n\nThis is an old-style Mixin, which means it's probably compatible with your React application if it's a few years old. If you're a hip young programmer, you might prefer [a hook, instead](https://usehooks.com/useLocalStorage/).\n\n# Install\n[![React-LocalStorage](https://nodei.co/npm/react-localstorage.png)](https://npmjs.org/package/react-localstorage)\n```sh\n    npm i react-localstorage --save\n```\n\nUsage\n-----\n\nA simple component:\n\n```javascript\nconst React = require('react');\nconst LocalStorageMixin = require('react-localstorage');\nconst reactMixin = require('react-mixin');\n\n// This is all you need to do\n@reactMixin.decorate(LocalStorageMixin)\nclass TestComponent extends React.Component {\n  static displayName = 'TestComponent';\n\n  state = {counter: 0};\n\n  onClick() {\n    this.setState({counter: this.state.counter + 1});\n  }\n\n  render() {\n    return \u003cspan onClick={this.onClick}\u003e{this.state.counter}\u003c/span\u003e;\n  }\n}\n```\n\nOptions\n-------\n\nThe key that state is serialized to under `localStorage` is chosen with the following code:\n\n```javascript\nfunction getLocalStorageKey(component) {\n  if (component.getLocalStorageKey) return component.getLocalStorageKey();\n  if (component.props.localStorageKey === false) return false;\n  if (typeof component.props.localStorageKey === 'function') return component.props.localStorageKey.call(component);\n  return component.props.localStorageKey || getDisplayName(component) || 'react-localstorage';\n}\n```\n\nIf you are synchronizing multiple components with the same `displayName` to localStorage,\nyou must set a unique `localStorageKey` prop on the component. You may set a function as well.\n\nAlternatively, you may define the method `getLocalStorageKey` on the component's prototype.\nThis gives you the freedom to choose keys depending on the component's props or state.\n\nTo disable usage of localStorage entirely, pass `false` or a function that evaluates to `false`.\n\nFiltering\n---------\nIf you only want to save parts of state in localStorage, set `stateFilterKeys` to an array of strings corresponding to the state keys you want to save.\n\n```javascript\ngetDefaultProps: function() {\n  return {\n    stateFilterKeys: ['one', 'two']\n  };\n}\n```\nYou can do this by setting a `stateFilterKeys` prop or define the method `getStateFilterKeys` on the component's prototype.\n\n```javascript\ngetStateFilterKeys: function() {\n  return ['one', 'two'];\n}\n```\n\n\nServer Rendering\n----------------\n\n`LocalStorageMixin` will call `setState` on `componentDidMount`, so it will not break server rendering\nchecksums. This is new as of `0.2.0`.\n\n\nTests\n------\n\nWe use `jest` as the test runner. To run the test, simply `yarn install` all the dependencies and run `yarn test`.\n","funding_links":[],"categories":["Utilities","Uncategorized","Awesome React"],"sub_categories":["Framework bindings / integrations","Uncategorized","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSTRML%2Freact-localstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSTRML%2Freact-localstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSTRML%2Freact-localstorage/lists"}