value
Returns the current value stored in local storage.
Hook
useLocalStorage
The useLocalStorage hook lets you store and retrieve values from the browsers local storage while keeping them synchronized with React state. It is ideal for user preferences, settings, and persistent application data.
Import
import { useLocalStorage } from "@shivms/ui";API
The hook provides state that automatically stays in sync with the browsers local storage.
setValue
Updates the stored value and syncs it with local storage.
Persistent Storage
Keeps data available even after page refreshes.
Basic Usage
Create persistent state by providing a storage key and a default value.
import {
Button,
useLocalStorage,
} from "@shivms/ui";
export default function App() {
const [
count,
setCount,
] = useLocalStorage(
"count",
0
);
return (
<Button
onClick={() => setCount(count + 1)}
>
Count: {count}
</Button>
);
}Features
01
Persistent State
Automatically saves data so it remains available after page reloads.
02
React Integration
Works like React state while keeping local storage synchronized.
03
Easy to Use
Perfect for storing user preferences, themes, settings, and other persistent data.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.