Skip to main content

Preferences Utilities

A typed localStorage abstraction that the library uses to persist theme and language settings. You can use the same utilities in consuming apps to store application-specific preferences with the same key prefix.

Import​

import {
  PREFERENCE_KEYS,
  DEFAULT_PREFERENCES,
  loadPreferencesFromStorage,
  savePreferencesToStorage,
  type PreferenceKey,
} from "@xocialive/ui-components";

PREFERENCE_KEYS​

An object of all localStorage key names used by the library:

PREFERENCE_KEYS.LANGUAGE; // "language"
PREFERENCE_KEYS.I18NEXT_LNG; // "i18nextLng"
PREFERENCE_KEYS.THEME_MODE; // "themeMode"
PREFERENCE_KEYS.COLOR_THEME; // "colorTheme"
PREFERENCE_KEYS.FONT_FAMILY; // "fontFamily"
PREFERENCE_KEYS.FONT_SIZE; // "fontSize"
PREFERENCE_KEYS.BORDER_RADIUS; // "borderRadius"
// ... all 25+ keys

DEFAULT_PREFERENCES​

DEFAULT_PREFERENCES.THEME_MODE; // "light"
DEFAULT_PREFERENCES.COLOR_THEME; // "aurora"
DEFAULT_PREFERENCES.FONT_FAMILY; // "tajawal"
// ...

loadPreferencesFromStorage()​

Reads all library preferences from localStorage and returns a typed object. Values missing from storage are filled from DEFAULT_PREFERENCES.

const prefs = loadPreferencesFromStorage();
// { themeMode: "dark", colorTheme: "ocean", fontFamily: "cairo", ... }

savePreferencesToStorage(key, value)​

Writes a single preference value to localStorage:

savePreferencesToStorage(PREFERENCE_KEYS.COLOR_THEME, "ocean");

PreferenceKey​

Union type of all valid preference key strings:

type PreferenceKey = "language" | "themeMode" | "colorTheme" | ...;