/** * Configuration properties for the useLocalStorage hook. * * @template T - The type of the value stored in localStorage * */ export interface StorageProperties { /** * The localStorage key under which the value will be stored. Must be unique * within your application to avoid conflicts. */ key: string; /** * Optional default value that will be set in localStorage if no value exists. * This value will be used on initial mount and when resetValue() is called. */ initialValue?: T; } /** * A React hook for managing state synchronized with localStorage. Uses React * 19's useSyncExternalStore for optimal concurrent rendering support and * automatic synchronization across components. Changes are automatically * persisted to localStorage and synchronized across all components using the * same key, including across browser tabs. * * Features: * - Automatic serialization/deserialization with JSON * - Type-safe with TypeScript generics * - Supports functional updates (similar to setState) * - Synchronized across components and browser tabs * - Handles edge cases (null, undefined, errors) * - Compatible with React 19+ concurrent features * * @template T - The type of the value stored in localStorage * @param {StorageProperties} config - Configuration object with key and optional initialValue * @returns {[T | null, (value: T | ((current: T) => T)) => void, () => void, () => void]} A tuple containing: * - [0] current value from localStorage (or null if not set) * - [1] setValue function to update the stored value (supports direct value or function updater) * - [2] resetValue function to restore the initialValue * - [3] removeValue function to remove the value from localStorage * * @example * ```js * // Basic usage with a string value * import { useLocalStorage } from '@versini/ui-hooks'; * const [model, setModel, resetModel, removeModel] = useLocalStorage({ * key: 'gpt-model', * initialValue: 'gpt-3', * }); * * // Direct update * setModel('gpt-4'); // Stores "gpt-4" * * // Functional update (receives current value) * setModel((current) => (current === 'gpt-3' ? 'gpt-4' : 'gpt-3')); * * // Reset to initial value * resetModel(); // Restores "gpt-3" * * // Remove from localStorage * removeModel(); // Sets value to null and removes from storage * ``` * * @example * ```js * // Usage with complex objects * interface UserPreferences { * theme: 'light' | 'dark'; * fontSize: number; * } * * const [prefs, setPrefs] = useLocalStorage({ * key: 'user-preferences', * initialValue: { theme: 'light', fontSize: 14 } * }); * * // Update specific property * setPrefs(current => ({ ...current, theme: 'dark' })); * ``` * */ export declare function useLocalStorage({ key, initialValue, }: StorageProperties): any[];