![\"usefy](\"https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png\"){kind=logo}
\n\n \n
\n A powerful React hook for persisting state in localStorage with automatic same-tab and cross-tab synchronization\n
\n\n\n \n ![\"npm](\"https://img.shields.io/npm/v/@usefy/use-local-storage.svg?style=flat-square&color=007acc\")
\n \n \n ![\"npm](\"https://img.shields.io/npm/dm/@usefy/use-local-storage.svg?style=flat-square&color=007acc\")
\n \n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/@usefy/use-local-storage?style=flat-square&color=007acc\")
![\"license\"](\"https://img.shields.io/npm/l/@usefy/use-local-storage.svg?style=flat-square&color=007acc\")
\n \n
\n Installation ā¢\n Quick Start ā¢\n API Reference ā¢\n Examples ā¢\n License\n
\n\n\n \n š View Storybook Demo\n \n
\n\n---\n\n## Overview\n\n`@usefy/use-local-storage` provides a `useState`-like API for persisting data in localStorage. Features include **same-tab component synchronization**, cross-tab synchronization, custom serialization, lazy initialization, error handling, and a `removeValue` function. Data persists across browser sessions.\n\n**Part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem** ā a collection of production-ready React hooks designed for modern applications.\n\n### Why use-local-storage?\n\n- **Zero Dependencies** ā Pure React implementation with no external dependencies\n- **TypeScript First** ā Full type safety with generics and exported interfaces\n- **useState-like API** ā Familiar tuple return: `[value, setValue, removeValue]`\n- **Same-Tab Sync** ā Multiple components using the same key stay in sync automatically\n- **Cross-Tab Sync** ā Automatic synchronization across browser tabs\n- **React 18+ Optimized** ā Built with `useSyncExternalStore` for Concurrent Mode compatibility\n- **Custom Serialization** ā Support for Date, Map, Set, or any custom type\n- **Lazy Initialization** ā Function initializer support for expensive defaults\n- **Error Handling** ā `onError` callback for graceful error recovery\n- **SSR Compatible** ā Works seamlessly with Next.js, Remix, and other SSR frameworks\n- **Stable References** ā Memoized functions for optimal performance\n- **Well Tested** ā Comprehensive test coverage with Vitest\n\n---\n\n## Installation\n\n```bash\n# npm\nnpm install @usefy/use-local-storage\n\n# yarn\nyarn add @usefy/use-local-storage\n\n# pnpm\npnpm add @usefy/use-local-storage\n```\n\n### Peer Dependencies\n\nThis package requires React 18 or 19:\n\n```json\n{\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n }\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport { useLocalStorage } from \"@usefy/use-local-storage\";\n\nfunction ThemeToggle() {\n const [theme, setTheme, removeTheme] = useLocalStorage(\"theme\", \"light\");\n\n return (\nCurrent theme: {theme}
\n \n \n \nHello, {name || \"Guest\"}!
\nLast visit: {lastVisit.toLocaleDateString()}
\n \nTotal: ${total.toFixed(2)}
\n \n\n Built with care by the usefy team\n
\n","readmeFilename":"README.md"}