{"_id":"@bozhkovatanas/react-use-storage","_rev":"1-2f47b304f7e2858c3e59f0ab9d34b324","name":"@bozhkovatanas/react-use-storage","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bozhkovatanas/react-use-storage","version":"1.0.0","description":"Use Local\\Session Storage with React hooks","author":{"name":"Atanas Bozhkov","email":"bozhkov.atanas@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/atanasbozhkov/react-use-storage.git"},"homepage":"https://github.com/atanasbozhkov/react-use-storage","main":"dist/react-use-storage.esm.js","umd:main":"dist/react-use-storage.umd.production.js","module":"dist/react-use-storage.esm.js","typings":"dist/index.d.ts","scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom --watch","version:alpha":"npm version prerelease --preid=alpha","publish:alpha":"npm publish --tag alpha","prepublishOnly":"tsdx build"},"keywords":["localStorage","react","hooks"],"devDependencies":{"@testing-library/react-hooks":"^3.4.1","@types/jest":"^26.0.10","@types/react":"^16.9.46","@types/react-dom":"^16.9.8","husky":"^4.2.5","prettier":"^2.0.5","pretty-quick":"^3.0.0","react":"^16.8.1","react-dom":"^16.8.1","react-test-renderer":"^16.10.2","tsdx":"^0.13.2","tslib":"^2.0.1","typescript":"^4.0.2"},"peerDependencies":{"react":">=16.8.1"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"jest":{"setupFiles":["./test/setup.ts"]},"gitHead":"26c0c6e15118920a0919aa8d1a3d0f4fd4ed1ffd","bugs":{"url":"https://github.com/atanasbozhkov/react-use-storage/issues"},"_id":"@bozhkovatanas/react-use-storage@1.0.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fg2chxyFu1ZLTaEZkZxavkfWxbOiwoZdovr/n3M1v5huWIF/WfN5ebxCKOzRS2mRXeDsB9BrTRdW1X6shCAz7Q==","shasum":"25f64bbe6708b0b6a56b26eb08b33ca9c57884fd","tarball":"https://registry.npmjs.org/@bozhkovatanas/react-use-storage/-/react-use-storage-1.0.0.tgz","fileCount":14,"unpackedSize":31788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9ybHCRA9TVsSAnZWagAAvckP/j6M71wgyvG9Eo3JyVdc\nlR/JkmuTmC+5Jo+lhTrffBvLhquVf7DNuQL7rE5UFP4fitxwaQer9CKeTgF3\nzFhmWS7dFwpgAK/UomVUoBlIfLgJ+MbrJlXJqlvE/F1NoFWekq8BUZh3CfLC\nMTGYgdYNUMYzKqcAwD9yBHec//qj2u8Uepd3AQUxoEWi0altJTq2RyuP3R/0\n/Vs130nE+0r/cMmdXZJGHm/dVyr0rQ+VoD714G8E0YrKCrV1k2Ym/Qan1pS5\nx1WXPibFtwQg/0MMR5D29muYCYsd46oUXIxfq9zIxVFcAuWqBVesSuZPzSv7\ndG1zyf0pSlI4NTUEtMp7msUe/4PwvvZxSHrGbLidkAW2KN6Q4H4+CfI0SA/B\nzVgrubBPZnFlv9cCFZh/VlsP340yfyWtEAQYdxhSmBn9ujguiO+EMC9UuZ1Q\n/z/X48QMh9FdBhgdWOXQeY7JeikdTm+lXsBcGvJCMuD5NrtpqO+eCPKnVJjh\nTuvFHKchQ+/s+rSD8iN7veNRV/1L+JZ0a3jAsXLSdsviMc3/K1wacgzXGS5O\nyfK1oVXC8BAbTZeGEzd5RcFJpUXbx7CuqZuECOFZaqOGVshePKP73olEcuF9\ncubHvq7km2nB9B9M9SEgfrgy8FeUNb7Lg+SVv+VH8wtNnTEEB/omgIPuLYia\nzN/R\r\n=UD2b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfeR4rihy/9xR+bQFDPkJ+20lB+WeeuFS8nkJFI7It7QIgAZhGkLWbLlKkE4g/sCP8JpFA0liGY1v1kjSVQuOBYTY="}]},"_npmUser":{"name":"bozhkovatanas","email":"bozhkov.atanas@gmail.com"},"directories":{},"maintainers":[{"name":"bozhkovatanas","email":"bozhkov.atanas@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-storage_1.0.0_1643587270940_0.5652730478628198"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-31T00:01:10.868Z","1.0.0":"2022-01-31T00:01:11.120Z","modified":"2022-04-04T20:18:37.574Z"},"maintainers":[{"name":"bozhkovatanas","email":"bozhkov.atanas@gmail.com"}],"description":"Use Local\\Session Storage with React hooks","homepage":"https://github.com/atanasbozhkov/react-use-storage","keywords":["localStorage","react","hooks"],"repository":{"type":"git","url":"git+https://github.com/atanasbozhkov/react-use-storage.git"},"author":{"name":"Atanas Bozhkov","email":"bozhkov.atanas@gmail.com"},"bugs":{"url":"https://github.com/atanasbozhkov/react-use-storage/issues"},"license":"MIT","readme":"# @bozhkovatanas/react-use-storage\r\n\r\n_depends on stable v16.8.1~_\r\n\r\nAccess [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [Session Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) using [React hooks](https://reactjs.org/docs/hooks-intro.html).\r\n\r\nWith support for:\r\n\r\n- Typescript\r\n- Custom Serializers/Deserializers\r\n- Local Storage and Session Storage\r\n\r\nProject is a fork of [react-use-localstorage](https://github.com/dance2die/react-use-localstorage)\r\n\r\n## How to use it\r\n\r\n### Basic Hook Usage\r\n\r\n```javascript\r\nimport useLocalStorage from '@bozhkovatanas/react-use-storage';\r\nconst [item, setItem] = useStorage < string > ('name', 'Initial Value');\r\n```\r\n\r\n### Full example\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport useLocalStorage from '@bozhkovatanas/react-use-storage';\r\n\r\nimport './styles.css';\r\n\r\nfunction App() {\r\n  const [item, setItem] = useStorage < string > ('name', 'Initial Value');\r\n\r\n  return (\r\n    <div className=\"App\">\r\n      <h1>Set Name to store in Local Storage</h1>\r\n      <div>\r\n        <label>\r\n          Name:{' '}\r\n          <input\r\n            type=\"text\"\r\n            placeholder=\"Enter your name\"\r\n            value={item}\r\n            onChange={(e) => setItem(e.target.value)}\r\n          />\r\n        </label>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst rootElement = document.getElementById('root');\r\nReactDOM.render(<App />, rootElement);\r\n```\r\n\r\n### UseStorage Options\r\n\r\nYou can configure the storage type and pass custom (de)serializers to `useLocalStorage`.\r\n\r\n```typescript\r\nfunction useStorage<T>(\r\n  key: string,\r\n  initialValue: T,\r\n  options?: UseStorageOptions<T>\r\n): [T, Dispatch<T>];\r\n\r\nexport interface UseStorageOptions<T> {\r\n  serializer?: (input: T) => string;\r\n  deserializer?: (input: string) => T;\r\n  type?: 'session' | 'local'; // Will default to 'local'\r\n}\r\n```\r\n\r\n### Option Defaults\r\n\r\nIf no options are provided - `useStorage` will default to localStorage and `JSON.strinfigy` and `JSON.parse` will be used for serializing.\r\n\r\n### Custom Serializers/Deserializers Example:\r\n\r\nYou can add support for storing values as long as you are able to serialize and deserialize them from strings.\r\nBasic example for storing [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) in local storage\r\n\r\n```javascript\r\nconst mapSerializer = (value) => {\r\n  const serializedMap = JSON.stringify(Object.fromEntries(value));\r\n  return serializedMap;\r\n},\r\nconst mapDeserializer = (value) => {\r\n  const deserializedMap = new Map<string, string>(\r\n  Object.entries(JSON.parse(value))\r\n);\r\n  return deserializedMap;\r\n},\r\n\r\nconst [map, setMap] = useStorage<Map<string, string>>('KEY', new Map(), {\r\n  serializer: mapSerializer,\r\n  deserializer: mapDeserializer\r\n}\r\n\r\n```\r\n\r\n### Note for SSR (server-side rendering)\r\n\r\nIf you are using Gatsby or other SSR frameworks, such as Next.js, refer to [this workaround](https://github.com/dance2die/react-use-localstorage/issues/24#issuecomment-581479939) by @hencatsmith.\r\n\r\nYou need to make sure that `window` is available.\r\n\r\n```js\r\nconst useSsrLocalStorage = (\r\n  key: string,\r\n  initial: string\r\n): [string, React.Dispatch<string>] => {\r\n  return typeof window === 'undefined'\r\n    ? [initial, (value: string) => undefined]\r\n    : useLocalStorage(key, initial);\r\n};\r\n```\r\n\r\n## Demo\r\n\r\n![demo](https://github.com/dance2die/react-use-localstorage/raw/master/react-use-localstorage.gif)\r\n","readmeFilename":"README.md"}