Skip to main content

Contexts

The library exposes three React contexts that power the shell behaviour:

Context / ProviderPurpose
AppProviderConvenience wrapper — composes all three providers below
ThemeProvider / ThemeContext25+ theme dimensions, dark/light mode, persisted to localStorage
LanguageProvider / LanguageContextRTL/LTR direction, Emotion cache switching, i18next compatibility

Import​

// Providers and hooks
import { AppProvider, useApp, useAppOptional } from "@xocialive/ui-components";

// Sub-entry for lighter imports
import { ThemeProvider, LanguageProvider, useLanguage } from "@xocialive/ui-components/contexts";

Typical setup​

In most Xocialive apps you mount AppProvider once at the root and never touch the sub-providers directly:

import { AppProvider } from "@xocialive/ui-components";

<AppProvider language={i18n.language} onLanguageChange={i18n.changeLanguage}>
  <App />
</AppProvider>;

For advanced use cases (custom Redux store, selective providers) see App Setup.