Skip to main content

AppProvider

AppProvider is the top-level preferences orchestrator. It fetches and persists user preferences (theme, language, context) and wraps ThemeProvider and LanguageProvider so you don't have to compose them manually.

Import​

import { AppProvider, useApp } from "@xocialive/ui-components/contexts";
import type { AppPreferencesConfig, PreferencesData } from "@xocialive/ui-components/contexts";

Props​

PropTypeDefaultDescription
configAppPreferencesConfig—Required. Preferences fetch/save callbacks
childrenReactNode—Application tree
onPreferencesLoaded(prefs: Partial<PreferencesData>) => void—Called once after the initial preferences fetch
loadingFallbackReactNode—Shown while preferences are loading (default: nothing)

AppPreferencesConfig​

interface AppPreferencesConfig {
  fetchPreferences: () => Promise<Partial<PreferencesData>>;
  savePreferences: (preferences: Partial<PreferencesData>) => Promise<void>;
  currentApplicationId: string;
}

Usage​

src/App.tsx
import { AppProvider } from "@xocialive/ui-components/contexts";
import type { PreferencesData } from "@xocialive/ui-components/contexts";

<AppProvider
  config={{
    fetchPreferences: async (): Promise<Partial<PreferencesData>> => {
      // fetch from your API and return user preferences
      return {};
    },
    savePreferences: async (preferences) => {
      // persist to your API
    },
    currentApplicationId: "my-app-id",
  }}
  onPreferencesLoaded={(prefs) => {
    // e.g. sync i18next language
    if (prefs.language) i18n.changeLanguage(prefs.language);
  }}
>
  <ThemedContent />
</AppProvider>;

useApp()​

Returns the full app context value. Throws if called outside AppProvider.

const {
  preferences, // PreferencesData — current user preferences
  appData, // Record<string, any> — app-level data store
  isApiLoaded, // boolean — true after initial fetch completes
  isSyncing, // boolean — true while saving preferences
  updateThemePreference, // (key, value) => void
  updateLanguage, // (lang: string) => void
  updateContext, // (contextId: string) => void
  updateAppData, // (key: string, value: any) => void
  getAppData, // (key: string) => any
  resetToDefaults, // () => void
} = useApp();

See also​