Skip to main content

​
LocationContext

LocationContext is a thin component that composes the app’s providers in the correct order so your components can rely on a fully-initialized environment: location resolution, auth, settings, and UI scaffolding. It also provides a Suspense fallback for data-driven providers. Source: src/states/LocationContext.tsx

​
Composition order

export const LocationContext = (props: { children: ReactElement }) => {
  return (
    <Suspense fallback={<Preloader />}>
      <LocationByRouteProvider>
        <AuthProvider>
          <LocationSettingsProvider>
            <CSSLoaderComponent url="/api/styles/styles.css">
              <ModalProvider>{props.children}</ModalProvider>
            </CSSLoaderComponent>
          </LocationSettingsProvider>
        </AuthProvider>
      </LocationByRouteProvider>
    </Suspense>
  )
}
At the app root (src/App.tsx), the entire tree is wrapped by LocationByHostProvider before LocationContext is rendered. This guarantees host-level location is available before route-level overrides: 
// src/App.tsx
<LocationByHostProvider>
  {/* boundaries, query, notifications, router */}
  <HomeRouter>
    <LocationContext>{/* app pages */}</LocationContext>
  </HomeRouter>
</LocationByHostProvider>

​
Responsibilities

  • Provide a Suspense boundary (<Preloader />) for data-loading providers.
  • Scope business context either by route param (via LocationByRouteProvider) or fallback to host (via LocationByHostProvider at the app root).
  • Ensure authentication, location settings, and modal system are available to children.

​
When to use

Use LocationContext to wrap your routed application. If you’re building a standalone view or micro-frontend, replicate the same provider order to guarantee consistent behavior.