LocationContext (provider composition)

How the application composes location providers, Suspense, auth, and settings to deliver scoped context to your components.

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.

Related hooks and providers

• useLocationByHostContext – Resolve business by host/domain
• useLocationByRouteContext – Override business by :webAddress