SkyStateProvider

SkyStateProvider is a React context provider that initializes a SkyState client, begins fetching public state, restores auth when possible, and makes state available to all descendant hooks.

Place it near the root of your component tree (or near the root of the subtree that needs SkyState). All React SDK hooks below it read from the same client instance.

---

Basic Example

import { SkyStateProvider } from '@skystate/react';

createRoot(document.getElementById('root')!).render(
  <SkyStateProvider account="acc_example" project="my-project" environment="production">
    <App />
  </SkyStateProvider>,
);

---

Props

Prop	Type	Required	Description
account	string	Yes	Account route identifier, for example acc_example.
project	string	Yes	Project identifier.
environment	string	No	Environment slug (full name only, no aliases). Defaults to development. See Environments.
apiUrl	string	No	SkyState API base URL. When omitted, falls back to VITE_SKYSTATE_API_URL, NEXT_PUBLIC_SKYSTATE_API_URL, or REACT_APP_SKYSTATE_API_URL, then to https://api.skystate.io.
authFrontUrl	string	No	Hosted auth page base URL used by loginWithRedirect(). When omitted, falls back to VITE_SKYSTATE_AUTH_FRONT_URL, NEXT_PUBLIC_SKYSTATE_AUTH_FRONT_URL, or REACT_APP_SKYSTATE_AUTH_FRONT_URL, then to https://auth.skystate.io.
callbackUrl	string	No	Explicit hosted-auth callback URL.
onError	(error: SkyStateError) => void	No	Receives provider, auth, and state errors.
onLoginComplete	(returnTo: string) => void	No	Called after an auth callback completes.
children	ReactNode	Yes	Descendant React tree.

---

Environment Selection

The environment prop is a plain string you supply (full slug, no aliases) and has no env-var fallback. For how environments work and how to pick the value per build, see Environments.

---

API and Auth URL Overrides

The apiUrl and authFrontUrl props default to the hosted SkyState service. Most apps do not need to override them; set them for local-stack or custom-host setups.

---

Lifecycle

The provider owns one SkyState client for the mounted account, project, and environment.

Props are read once at mount. To switch account, project, or environment, unmount and remount the provider, or give it a different React key.

---

Using Multiple Providers

Each SkyStateProvider instance connects to one (apiUrl, account, project, environment) tuple. If your application reads state from multiple projects, nest or render multiple providers:

<SkyStateProvider account="acc_example" project="website">
  <WebsiteSection />
</SkyStateProvider>

<SkyStateProvider account="acc_example" project="admin">
  <AdminSection />
</SkyStateProvider>

Hooks will use the nearest SkyStateProvider ancestor in the tree.