> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
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:

```tsx theme={null}
// 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](/developers/state/use-location-by-host-context) – Resolve business by host/domain
* [useLocationByRouteContext](/developers/state/use-location-by-route-context) – Override business by `:webAddress`