{"id":16594599,"url":"https://github.com/antonybudianto/react-save-localstorage","last_synced_at":"2025-03-21T13:31:56.042Z","repository":{"id":46938687,"uuid":"158902556","full_name":"antonybudianto/react-save-localstorage","owner":"antonybudianto","description":"🗄 React component to save data to localStorage on render phase safely","archived":false,"fork":false,"pushed_at":"2022-12-08T19:14:59.000Z","size":1874,"stargazers_count":26,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T01:51:25.537Z","etag":null,"topics":["local-storage","localstorage","react","reactjs","render-props"],"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/antonybudianto.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":"2018-11-24T04:33:53.000Z","updated_at":"2021-01-07T07:02:54.000Z","dependencies_parsed_at":"2023-01-25T11:30:57.164Z","dependency_job_id":null,"html_url":"https://github.com/antonybudianto/react-save-localstorage","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonybudianto%2Freact-save-localstorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonybudianto%2Freact-save-localstorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonybudianto%2Freact-save-localstorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonybudianto%2Freact-save-localstorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antonybudianto","download_url":"https://codeload.github.com/antonybudianto/react-save-localstorage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244806126,"owners_count":20513383,"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":["local-storage","localstorage","react","reactjs","render-props"],"created_at":"2024-10-11T23:46:46.700Z","updated_at":"2025-03-21T13:31:55.764Z","avatar_url":"https://github.com/antonybudianto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-save-localstorage\n\n[![npm version](https://badge.fury.io/js/react-save-localstorage.svg)](https://badge.fury.io/js/react-save-localstorage)\n[![Build Status](https://travis-ci.org/antonybudianto/react-save-localstorage.svg?branch=master)](https://travis-ci.org/antonybudianto/react-save-localstorage)\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/7658554/48966890-481d8200-f00b-11e8-8d75-9332fe62fac7.png\"\u003e\n\u003c/p\u003e\n\nSave and sync your data on render phase to localStorage safely\n\n\u003e Try it [live at StackBlitz](https://stackblitz.com/edit/demo-react-save-localstorage)\n\n```js\nimport React, { Component } from 'react';\nimport SaveLocalStorage from 'react-save-localstorage';\n\nclass Home extends Component {\n  state = {\n    email: ''\n  };\n  render() {\n    return (\n      \u003cdiv\u003e\n        {/* Mode 1: read only */}\n        \u003cSaveLocalStorage lsKey=\"lang\"\u003e\n          {lang =\u003e \u003cdiv\u003eLanguage: {lang || '-'}\u003c/div\u003e}\n        \u003c/SaveLocalStorage\u003e\n\n        {/* Mode 2: write only */}\n        \u003cSaveLocalStorage lsKey=\"emailBackup\" value={this.state.email} /\u003e\n\n        {/* Mode 3: dual */}\n        \u003cSaveLocalStorage value={this.state.email} lsKey=\"email\"\u003e\n          {v =\u003e (\n            \u003cdiv\u003e\n              \u003cinput\n                value={v}\n                onChange={e =\u003e\n                  this.setState({\n                    email: e.target.value\n                  })\n                }\n              /\u003e\n              \u003cdiv\u003eWelcome, {v || 'Guest'}\u003c/div\u003e\n            \u003c/div\u003e\n          )}\n        \u003c/SaveLocalStorage\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n## Props\n\n- **lsKey** (string, required)\n- **value** (string)\n- **sync** (bool)\n\n  To sync after value updates, default is `true`\n\n- **children** (func)\n\n  Function that accept loaded **value** from localStorage\n\n- **onSave** (func)\n\n  Function that accept object containing:\n\n  - `init` (boolean that indicated it's the first mount)\n  - `value` (the value being saved)\n\n  This is called for every value updates.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonybudianto%2Freact-save-localstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantonybudianto%2Freact-save-localstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonybudianto%2Freact-save-localstorage/lists"}