@skystate/react

@skystate/react provides a React context provider and hooks that integrate SkyState public state, user state, and end-user auth into React applications. See what public state is for.

---

Basic Example

import { SkyStateProvider, useStatus, usePublicState, useUserState } from '@skystate/react';

function Root() {
  return (
    <SkyStateProvider account="acc_example" project="my-project" environment="production">
      <App />
    </SkyStateProvider>
  );
}

function App() {
  const { auth } = useStatus();
  const { value: banner } = usePublicState('banner', { text: 'Welcome' });
  const { value: theme, set: setTheme } = useUserState('theme', 'dark');

  if (auth.status !== 'authenticated') {
    return <button onClick={auth.loginWithRedirect}>Sign in</button>;
  }

  return (
    <>
      <p>{banner?.text}</p>
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
        Theme: {theme}
      </button>
    </>
  );
}

---

Installation

See Installation - SDKs. @skystate/react requires React 18 or later and depends on @skystate/core; you do not need to install @skystate/core separately.

---

API Reference

Provider

Export	Description
SkyStateProvider	Context provider. Wrap your app (or a subtree) to make SkyState available to hooks.
SkyStateProviderProps	TypeScript type for the provider's props.

Hooks

Export	Description
useStatus()	Returns { auth, health }: auth status plus loginWithRedirect() and logout(), and overall client health.
usePublicState<T>(key, fallback?)	Returns { value: T | null }.
useUserState<T>(key, fallback?)	Returns { value: T | null, set, clear, syncStatus, draft }.

---

Sections

• SkyStateProvider: props reference and setup patterns
• usePublicState: reading public state with full type safety
• useUserState: reading, writing, and drafting user state
• useStatus: auth status, auth actions, and client health
• SDK contract: provider scope, hook return shapes, and key behaviors

---

Errors

Hooks called outside a SkyStateProvider throw missing_provider. The full error-code list, the per-status write contract, and the retry policy are in Error Handling. For how errors surface in React (health, auth, onError), see useStatus.