useLocalStorage

A hook that provides persistent storage with localStorage, including cross-tab synchronization. Perfect for implementing persistent state, user preferences, or any data that needs to survive page reloads.

Parameters

key: string - The localStorage key to store the value under
initialValue: T - Initial value (can be any serializable type)

Returns

current: T - Current stored value
setItemValue: (value: T | ((prevState: T) => T)) => void - Function to update the stored value
removeItem: () => void - Function to remove the item from localStorage

Usage


import { useLocalStorage } from '@rhinolabs/react-hooks';
 
function ThemeSelector() {
  const { current: theme, setItemValue: setTheme } = useLocalStorage('theme', 'light');
 
  return (
    <div>
      <select
        value={theme}
        onChange={(e) => setTheme(e.target.value)}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </div>
  );
}

Advanced Usage


interface UserPreferences {
  theme: 'light' | 'dark';
  fontSize: number;
  notifications: boolean;
}
 
function PreferencesManager() {
  const { 
    current: preferences, 
    setItemValue: setPreferences,
    removeItem: resetPreferences 
  } = useLocalStorage<UserPreferences>('preferences', {
    theme: 'light',
    fontSize: 16,
    notifications: true
  });
 
  const updateFontSize = (size: number) => {
    setPreferences(prev => ({
      ...prev,
      fontSize: size
    }));
  };
 
  return (
    <div>
      <h2>Preferences</h2>
      <button onClick={() => updateFontSize(preferences.fontSize + 1)}>
        Increase Font Size
      </button>
      <button onClick={resetPreferences}>
        Reset All Preferences
      </button>
    </div>
  );
}

Notes

Persists across page reloads
Syncs across browser tabs
Type-safe generic storage
JSON serialization
Functional updates
Error handling
Automatic initialization
Cross-tab communication