{"_id":"tg-use-local-storage-state","_rev":"2-d7a11ea9503dfe9730c72471bbe0e176","name":"tg-use-local-storage-state","dist-tags":{"latest":"16.0.3"},"versions":{"16.0.1":{"name":"tg-use-local-storage-state","version":"16.0.1","description":"React hook that persists data in localStorage","license":"MIT","repository":{"type":"git","url":"git+https://github.com/tnrich/use-local-storage-state.git"},"funding":"https://github.com/sponsors/tnrich","homepage":"https://github.com/tnrich/use-local-storage-state","author":{"name":"Antonio Stoilkov","email":"hello@tnrich.com","url":"http://tnrich.com"},"keywords":["react","hook","localStorage","persistent","state","useState","hooks","local storage","store"],"module":"es/index.js","jsnext:main":"es/index.js","sideEffects":false,"scripts":{"start":"cd demo; yarn start","build":"tsc && tsc --project tsconfig.esm.json","size":"yarn run build && size-limit","lint":"eslint --cache --format=pretty --ext=.ts ./","test":"yarn run build && yarn run lint && if [[ -z $CI ]]; then jest --coverage --coverageReporters=text; else jest --coverage; fi","release":"yarn run build && np","prettier":"prettier --write --config .prettierrc.yaml {*.ts,*.json}"},"engines":{"node":">=12"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@size-limit/preset-small-lib":"^7.0.5","@testing-library/react":"^12.1.4","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@types/react-dom":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.10.0","@typescript-eslint/parser":"^5.10.0","confusing-browser-globals":"^1.0.11","cypress":"^9.5.2","eslint":"^8.7.0","eslint-config-strictest":"^0.4.0","eslint-formatter-pretty":"^4.0.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-unicorn":"^40.1.0","jest":"^27.4.7","np":"^7.2.0","prettier":"^2.0.5","react":"17.0.2","react-dom":"17.0.2","react-test-renderer":"^17.0.1","size-limit":"^7.0.5","ts-jest":"^27.1.3","typescript":"^4.5.4","use-local-storage-state":"^16.0.1"},"size-limit":[{"name":"import *","path":"es/index.js","limit":"1.75 kB","gzip":false},{"name":"import *","path":"es/index.js","limit":"800 B"}],"types":"./index.d.ts","gitHead":"6fe1430c706586c382c3a8b8591a46264dd02012","bugs":{"url":"https://github.com/tnrich/use-local-storage-state/issues"},"_id":"tg-use-local-storage-state@16.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Oy2l5enKVG54q6hAtqZXh3/AabbRZ049VCzBE9U2NFJknFteOlwwjMIVLelbT7bObf3wAV590zlF1Onff1nalA==","shasum":"21b1b23dee38a11c4a9239ac5e4a67ff346eb2f3","tarball":"https://registry.npmjs.org/tg-use-local-storage-state/-/tg-use-local-storage-state-16.0.1.tgz","fileCount":11,"unpackedSize":33798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM2g8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvDBAAhlqpOE8Qbzlf8bgRwATRxhzk6DZeOQjrHLcyaJ4tMs21/aIR\r\nqMCZp2ImuV17cxh4DitAD28Zqy9p6SZuHO+cGDrytxkKVm+769c3MvXr78S7\r\niCLwx0X+XEmuGXrPQzCnvjkpZvRDLAxyN0GA4YQqRsZTNA8kULGAsr36CdLu\r\n7ORb9dVVyGykkZ1FxWqJXC9drp4FfjTDI9K0m7vtk9HJbmnnUTCuFut6CGdj\r\nio4EuA2JIUez8hIFzIiM0jf95Pl0UtgtGkq+iwMN5v9ArfkxfBAbgTKtB8Nl\r\nHcvzVOBlaMH39vFdSL9FeOn+L8UO+IEyudWuwzkuhi461e/woxYHg+A8GIIP\r\n9dkxbQjHkICyygJVce+gB6NWXGj4+mPvp5lA0EqZtY1tzV3E0tUAbNI26RUE\r\n2/8nj3rguYWJzYfjz7mAzuGmhnZtiTSOt06MXZXMxr74QuN4+oYdHCCYZLhj\r\nXp4ga9+kiDLAgJPE/JqzwehbjhyBy+cT2Xm0AGnu3+EqnOBNTEMetosSCeWr\r\nZ66Iors5Z0PT03GwdwaokbHH25LICHWzPNlFMNxctXc0h3uZoFfMhDC70Lfl\r\nyT2XmNRYQY83BzplP9+hr/m/rXn+tNSe36ojdlMoXZAMHeOFNfVlS190jU/+\r\nXSMpu3ZqQf92mt7GWj1DFjRe1DCz5ABPstM=\r\n=lQzV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz8NPh0Bz+ctnQB1xXsLFwOMFOToLV4cx7uNJSpHYhSAIgZBwvCu7ti+WUQoFHDozu1r2NsVoctAdTZLys41/0uKQ="}]},"_npmUser":{"name":"tnrich","email":"trich1230@gmail.com"},"directories":{},"maintainers":[{"name":"tnrich","email":"trich1230@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tg-use-local-storage-state_16.0.1_1647536188324_0.5878321698516411"},"_hasShrinkwrap":false},"16.0.3":{"name":"tg-use-local-storage-state","version":"16.0.3","description":"React hook that persists data in localStorage","license":"MIT","repository":{"type":"git","url":"git+https://github.com/tnrich/use-local-storage-state.git"},"funding":"https://github.com/sponsors/tnrich","homepage":"https://github.com/tnrich/use-local-storage-state","author":{"name":"Antonio Stoilkov","email":"hello@tnrich.com","url":"http://tnrich.com"},"keywords":["react","hook","localStorage","persistent","state","useState","hooks","local storage","store"],"module":"es/index.js","jsnext:main":"es/index.js","exports":"./es/index.js","sideEffects":false,"scripts":{"start":"cd demo; yarn start","build":"tsc && tsc --project tsconfig.esm.json","size":"yarn run build && size-limit","lint":"eslint --cache --format=pretty --ext=.ts ./","test":"yarn run build && yarn run lint && if [[ -z $CI ]]; then jest --coverage --coverageReporters=text; else jest --coverage; fi","release":"yarn run build && np","prettier":"prettier --write --config .prettierrc.yaml {*.ts,*.json}"},"engines":{"node":">=12"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@size-limit/preset-small-lib":"^7.0.5","@testing-library/react":"^12.1.4","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.0","@types/react":"^17.0.38","@types/react-dom":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.10.0","@typescript-eslint/parser":"^5.10.0","confusing-browser-globals":"^1.0.11","cypress":"^9.5.2","eslint":"^8.7.0","eslint-config-strictest":"^0.4.0","eslint-formatter-pretty":"^4.0.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.28.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-unicorn":"^40.1.0","jest":"^27.4.7","np":"^7.2.0","prettier":"^2.0.5","react":"17.0.2","react-dom":"17.0.2","react-test-renderer":"^17.0.1","size-limit":"^7.0.5","ts-jest":"^27.1.3","typescript":"^4.5.4","use-local-storage-state":"^16.0.1"},"size-limit":[{"name":"import *","path":"es/index.js","limit":"1.75 kB","gzip":false},{"name":"import *","path":"es/index.js","limit":"800 B"}],"types":"./index.d.ts","gitHead":"dca85f5337dfec889acd9cc9bca8746f31b461b1","bugs":{"url":"https://github.com/tnrich/use-local-storage-state/issues"},"_id":"tg-use-local-storage-state@16.0.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-q5IXfOVxOZ9ikYr2iDffzPhF9JHnYifLjC9mIbp6JzjNm94ITbGDg8ay/oZyK2mCg2dQGC0ItWbSBjsdY1RUqA==","shasum":"a5b2b4ad690b8bbd8c33b4520ce0539997f8e909","tarball":"https://registry.npmjs.org/tg-use-local-storage-state/-/tg-use-local-storage-state-16.0.3.tgz","fileCount":11,"unpackedSize":39993,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCICixW3PqmsSL+BYyOB/PQN2BCpMGAlDKq6onZjlX5iQIhAIqDP1JZvaZbeCj/rKuGlA+HQDsd9kYlz+x25gVe/Qu1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkB4NPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyaA//SsgPoGg3H+SK9aW9WORWCIck1OIo4yCV+OJQ6UvEHrg4QG/1\r\n8TB0eiWTd0Tja9b7Jo/w3m7Yv895CjhgMC+gzXbhPBkoDh+8w2o4G/45anBq\r\nkQXnsvCwjDkV8LtbToGjhYU8mmugEvG3P85QuGABYJ0Jbkj1r+fbAmM6UliS\r\npnkMEggQFUVVPt+fZKbMwT7tCE82NT/8XBdQT+U4D50wu94GwDFFibmnRM1q\r\nCJVjMsKbL3ovmIIDxL/2rLHQCpy9cv7DFG5CjGcs8dGNFZGiAS76KI9g7wFs\r\nByXZvg5wGkrG7EqAa1dfVyFjgsEbX3F7N/xJPs+r2cExS6emAO/y/W8pJ5Iv\r\nmG4bjQPpY0c9j1HKAV6b53d7r60sYIj1TfPGIczeKF8whJe6Pbj9LJMZRVrs\r\ns4aDYVxhJ3wHsrEUP8pqMCAB5RHn/DYU0KJUPfb8NRBHmaAZx87Z0qXpYm00\r\n+CwfFE5Ir8hDVraVnAtC5rhLG/BJ78Z75PaNUcloM/nW1GxDI/X8WwBNBKCz\r\nfcYu5HYeOIcObYXS2nXaIJ90AN8cs5MnTeMHm96CEiFuhZKfexa17H8+nofB\r\nSqkOj52d7vaLBo5Set5y+VKIVeYAF6rgpxv4oSlGA+Fy9FxE4CS82AzBlsqS\r\nO2j31FiWJxKSCdgbB4fGXr4eftoZr3y/nDU=\r\n=TW/R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"tnrich","email":"trich1230@gmail.com"},"directories":{},"maintainers":[{"name":"tnrich","email":"trich1230@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tg-use-local-storage-state_16.0.3_1678213967288_0.7608900900836595"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-17T16:56:28.323Z","16.0.1":"2022-03-17T16:56:28.465Z","modified":"2023-03-07T18:32:47.598Z","16.0.3":"2023-03-07T18:32:47.465Z"},"maintainers":[{"name":"tnrich","email":"trich1230@gmail.com"}],"description":"React hook that persists data in localStorage","homepage":"https://github.com/tnrich/use-local-storage-state","keywords":["react","hook","localStorage","persistent","state","useState","hooks","local storage","store"],"repository":{"type":"git","url":"git+https://github.com/tnrich/use-local-storage-state.git"},"author":{"name":"Antonio Stoilkov","email":"hello@tnrich.com","url":"http://tnrich.com"},"bugs":{"url":"https://github.com/tnrich/use-local-storage-state/issues"},"license":"MIT","readme":"# `tg-use-local-storage-state`\n\nThis is a fork of https://github.com/astoilkov/use-local-storage-state\nthat does 3 main things\n\n-   it syncs when changes are made to localStorage within the _same_ browser tab\n-   it adds an option `isSimpleString` (default false) which simplifies the storage of simple string values\n-   it adds a more complex cypress test to the existing test suite\n\n> React hook that persist data in `localStorage`\n\n[![Downloads](https://img.shields.io/npm/dm/tg-use-local-storage-state)](https://www.npmjs.com/package/tg-use-local-storage-state)\n[![Gzipped Size](https://badgen.net/bundlephobia/minzip/tg-use-local-storage-state)](https://bundlephobia.com/result?p=tg-use-local-storage-state)\n[![Test Coverage](https://img.shields.io/codeclimate/coverage/astoilkov/use-local-storage-state)](https://codeclimate.com/github/astoilkov/use-local-storage-state/test_coverage)\n[![Build Status](https://www.travis-ci.com/astoilkov/use-local-storage-state.svg?branch=master)](https://travis-ci.org/astoilkov/use-local-storage-state)\n\n## Install\n\n```shell\nnpm install tg-use-local-storage-state\n```\n\n## Why\n\n-   Actively maintained for the past 2 years — see [contributions](https://github.com/astoilkov/use-local-storage-state/graphs/contributors) page.\n-   SSR support with handling of [hydration mismatches](https://github.com/astoilkov/use-local-storage-state/issues/23).\n-   Handles the `Window` [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event and updates changes across browser tabs, windows, and iframe's.\n-   In-memory fallback when `localStorage` throws an error and can't store the data. Provides a `isPersistent` API to let you notify the user their data isn't currently being stored.\n-   Aiming for high-quality with [my open-source principles](https://astoilkov.com/my-open-source-principles).\n\n## Usage\n\n```typescript\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Todos() {\n    const [todos, setTodos] = useLocalStorageState('todos', {\n        ssr: true,\n        defaultValue: ['buy avocado', 'do 50 push-ups'],\n    })\n}\n```\n\n<details>\n<summary>Todo list example + CodeSandbox link</summary>\n<p></p>\n\nYou can experiment with the example [here](https://codesandbox.io/s/todos-example-tg-use-local-storage-state-pewbql?file=/src/App.tsx).\n\n```tsx\nimport React, { useState } from 'react'\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Todos() {\n    const [todos, setTodos] = useLocalStorageState('todos', {\n        ssr: true,\n        defaultValue: ['buy avocado'],\n    })\n    const [query, setQuery] = useState('')\n\n    function onClick() {\n        setQuery('')\n        setTodos([...todos, query])\n    }\n\n    return (\n        <>\n            <input value={query} onChange={(e) => setQuery(e.target.value)} />\n            <button onClick={onClick}>Create</button>\n            {todos.map((todo) => (\n                <div>{todo}</div>\n            ))}\n        </>\n    )\n}\n```\n\n</details>\n\n<details>\n<summary>Simple string example + CodeSandbox link</summary>\n<p></p>\n\nYou can experiment with the example [here](https://codesandbox.io/s/todos-example-use-local-storage-state-forked-z533i1).\n\n```tsx\nimport React, { useState } from 'react'\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Color() {\n    const [color, setColor] = useLocalStorageState('color', {\n        isSimpleString: true,\n        defaultValue: 'blue',\n    })\n\n    return (\n        <>\n            <button\n                onClick={function onClick() {\n                    setColor('newColor')\n                }}\n            >\n                Set new color via hook\n            </button>\n            <button\n                onClick={function onClick() {\n                    setColor('newColorFromLocalStorage')\n                }}\n            >\n                Set new color just by updating localstorage (not necessarily recommended but this\n                will work)\n            </button>\n            <div>{color}</div>\n        </>\n    )\n}\n```\n\n</details>\n\n<details>\n<summary>Kitchen Sink Example including changing localStorage directly  + CodeSandbox link</summary>\n<p></p>\n\nYou can experiment with the example [here](https://codesandbox.io/s/todos-example-use-local-storage-state-forked-uppgko?file=/src/App.tsx).\n\n```tsx\nimport React, { useState } from 'react'\n// import useLocalStorageState from 'use-local-storage-state' //tnr comment this line in and the following line out to see the difference between the two libraries\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nlocalStorage.removeItem('color')\nlocalStorage.removeItem('name')\nlocalStorage.setItem('name', 'nameAlreadySetInLocalStorage')\nlocalStorage.removeItem('age')\n\nexport default function MyComponent() {\n    const [color, setColor] = useLocalStorageState('color', {\n        defaultValue: `defaultColor`,\n        isSimpleString: true,\n    })\n    const [name, setName] = useLocalStorageState('name', {\n        defaultValue: 'defaultName',\n        isSimpleString: true,\n    })\n    const [jsonifiedString, setJsonifiedString] = useLocalStorageState('jsonifiedString', {\n        defaultValue: JSON.stringify('default jsonified string val'),\n        //note no isSimpleString here\n    })\n    const [age, setAge] = useLocalStorageState('age')\n    const [notes, setNotes] = useLocalStorageState('notes', {\n        defaultValue: ['default', 'notes'],\n    })\n\n    return (\n        <div>\n            <button\n                onClick={() => {\n                    localStorage.setItem('color', `colorFromLocalStorage`)\n                    localStorage.setItem('age', 1)\n                    localStorage.setItem(\n                        'jsonifiedString',\n                        JSON.stringify(`jsonifiedStringFromLocalStorage`),\n                    )\n                    localStorage.setItem('name', `nameFromLocalStorage`)\n                    localStorage.setItem(\n                        'notes',\n                        `['noteFromLocalStorage','anotherNoteFromLocalStorage' ]`,\n                    )\n                }}\n            >\n                click me to manually update localStorage\n            </button>\n            <button\n                onClick={() => {\n                    setColor('colorFromHook')\n                    setAge(11)\n                    setJsonifiedString(JSON.stringify('jsonifiedStringFromHook'))\n                    setName('nameFromHook')\n                    setNotes(['noteFromHook', 'anotherNoteFromHook'])\n                }}\n            >\n                click me to update via use-local-storage-state hook\n            </button>\n            <br></br>\n            <br></br>\n            <h3>color from use-local: {color}</h3>\n            <div>localStorage.getItem(\"color\"): {localStorage.getItem('color')}</div>\n            <br></br>\n            <br></br>\n            this was the old and IMO kind of dumb way to handle strings where you'd either need to\n            JSON.stringify or wrap the strings in ticks like so `\"someString\"` :\n            <h3>jsonifiedString from use-local: {jsonifiedString}</h3>\n            <div>\n                localStorage.getItem(\"jsonifiedString\"): {localStorage.getItem('jsonifiedString')}\n            </div>\n            <h3>name from use-local: {name}</h3>\n            <div>localStorage.getItem(\"name\"): {localStorage.getItem('name')}</div>\n            <h3>\n                age from use-local:{' '}\n                {age ||\n                    'tnrTodo - there should be an age here.. this was already broken though before I got here'}\n            </h3>\n            <div>localStorage.getItem(\"age\"): {localStorage.getItem('age')}</div>\n            <h3>notes from use-local: {notes && notes.join(',')}</h3>\n            <div>localStorage.getItem(\"notes\"): {localStorage.getItem('notes')}</div>\n            <br></br>\n            <br></br>\n            <br></br>\n            <AnothaComponent />\n        </div>\n    )\n}\n\nfunction AnothaComponent() {\n    const [int, setNewInt] = useState(1)\n    const [color, setColor] = useLocalStorageState('color', {\n        defaultValue: `defaultNestedColor`,\n        isSimpleString: true,\n    })\n    const [name, setName] = useLocalStorageState('name', {\n        defaultValue: 'defaultNestedName',\n        isSimpleString: true,\n    })\n    const [age, setAge] = useLocalStorageState('age', {\n        defaultValue: 40,\n    })\n    const [notes, setNotes] = useLocalStorageState('notes', {\n        defaultValue: ['default', 'nestedNotes'],\n    })\n\n    return (\n        <div>\n            <h3>Nested Component</h3>\n            <button\n                onClick={() => {\n                    localStorage.setItem('color', `colorFromLocalStorage2`)\n                    localStorage.setItem('name', `nameFromLocalStorage2`)\n                    localStorage.setItem('age', 2)\n                    localStorage.setItem(\n                        'notes',\n                        `['noteFromLocalStorage2','anotherNoteFromLocalStorage2' ]`,\n                    )\n                }}\n            >\n                click me to manually update nested localStorage\n            </button>\n            <button\n                onClick={() => {\n                    setColor('colorFromHook2')\n                    setName('nameFromHook2')\n                    setAge(22)\n                    setNotes(['noteFromNestedHook', 'anotherNoteFromNestedHook'])\n                }}\n            >\n                click me to update via nested use-local-storage-state hook\n            </button>\n            <br></br>\n            <br></br>\n            <h3>color from use-local nested: {color}</h3>\n            <div>nested localStorage.getItem(\"color\"): {localStorage.getItem('color')}</div>\n            <h3>name from use-local nested: {name}</h3>\n            <div>nested localStorage.getItem(\"name\"): {localStorage.getItem('name')}</div>\n            <h3>age from use-local nested: {age}</h3>\n            <div>nested localStorage.getItem(\"age\"): {localStorage.getItem('age')}</div>\n            <h3>notes from use-local nested: {notes && notes.join(',')}</h3>\n            <div>nested localStorage.getItem(\"notes\"): {localStorage.getItem('notes')}</div>\n        </div>\n    )\n}\n```\n\n</details>\n\n<details>\n<summary>SSR support</summary>\n<p></p>\n\nSSR supports includes handling of hydration mismatches. This prevents the following error: `Warning: Expected server HTML to contain a matching ...`. This is the only library I'm aware of that handles this case. For more, see [discussion here](https://github.com/astoilkov/use-local-storage-state/issues/23).\n\n```tsx\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Todos() {\n    const [todos, setTodos] = useLocalStorageState('todos', {\n        ssr: true,\n        defaultValue: ['buy avocado', 'do 50 push-ups'],\n    })\n}\n```\n\n</details>\n\n<details>\n<summary id=\"is-persistent\">Notify the user when <code>localStorage</code> isn't saving the data using the <code>`isPersistent`</code> property</summary>\n<p></p>\n\nThere are a few cases when `localStorage` [isn't available](https://github.com/astoilkov/use-local-storage-state/blob/7db8872397eae8b9d2421f068283286847f326ac/index.ts#L3-L11). The `isPersistent` property tells you if the data is persisted in `localStorage` or in-memory. Useful when you want to notify the user that their data won't be persisted.\n\n```tsx\nimport React, { useState } from 'react'\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Todos() {\n    const [todos, setTodos, { isPersistent }] = useLocalStorageState('todos', {\n        defaultValue: ['buy avocado'],\n    })\n\n    return (\n        <>\n            {todos.map((todo) => (\n                <div>{todo}</div>\n            ))}\n            {!isPersistent && <span>Changes aren't currently persisted.</span>}\n        </>\n    )\n}\n```\n\n</details>\n\n<details>\n<summary id=\"remove-item\">Removing the data from <code>localStorage</code> and resetting to the default</summary>\n<p></p>\n\nThe `removeItem()` method will reset the value to its default and will remove the key from the `localStorage`. It returns to the same state as when the hook was initially created.\n\n```tsx\nimport useLocalStorageState from 'tg-use-local-storage-state'\n\nexport default function Todos() {\n    const [todos, setTodos, { removeItem }] = useLocalStorageState('todos', {\n        defaultValue: ['buy avocado'],\n    })\n\n    function onClick() {\n        removeItem()\n    }\n}\n```\n\n</details>\n\n## API\n\n### `useLocalStorageState(key, options?)`\n\nReturns `[value, setValue, { removeItem, isPersistent }]` when called. The first two values are the same as `useState()`. The third value contains two extra properties:\n\n-   `removeItem()` — calls `localStorage.removeItem(key)` and resets the hook to it's default state\n-   `isPersistent` — `boolean` property that returns `false` if `localStorage` is throwing an error and the data is stored only in-memory\n\n### `key`\n\nType: `string`\n\nThe key used when calling `localStorage.setItem(key)` and `localStorage.getItem(key)`.\n\n⚠️ Be careful with name conflicts as it is possible to access a property which is already in `localStorage` that was created from another place in the codebase or in an old version of the application.\n\n### `options.defaultValue`\n\nType: `any`\n\nDefault: `undefined`\n\nThe default value. You can think of it as the same as `useState(defaultValue)`.\n\n### `options.ssr`\n\nType: `boolean`\n\nDefault: `false`\n\nEnables SSR support and handles hydration mismatches. Not enabling this can cause the following error: `Warning: Expected server HTML to contain a matching ...`. This is the only library I'm aware of that handles this case. For more, see [discussion here](https://github.com/astoilkov/use-local-storage-state/issues/23).\n\n## Alternatives\n\nThese are the best alternatives to my repo I have found so far:\n\n-   [donavon/use-persisted-state](https://github.com/donavon/use-persisted-state)\n-   [imbhargav5/rooks](https://github.com/imbhargav5/rooks/blob/master/packages/localstorage-state/README.md)\n-   [dance2die/react-use-localstorage](https://github.com/dance2die/react-use-localstorage)\n","readmeFilename":"readme.md"}