React SDK
React bindings for the sub.games browser SDK.
The @subgames/react package provides React bindings around the browser SDK. It loads the vanilla SDK script for you, initializes it, and exposes the SDK instance through React context.
When to Use This
Use the React SDK when:
- Your game or app is built with React
- You want a provider and hook instead of manually loading the browser SDK script
- You still want access to the full browser SDK API
If you are not using React, use the Browser SDK directly.
Installation
npm install @subgames/reactThe provider loads the production browser bundle from https://sdk.sub.games/sdk.js by default.
Quick Start
import { SubGamesProvider, useSubGames } from '@subgames/react';
function App() {
return (
<SubGamesProvider
config={{
gameKey: 'my-platformer',
}}
>
<Game />
</SubGamesProvider>
);
}
function Game() {
const { sdk, loading, error } = useSubGames();
if (loading) return <div>Loading...</div>;
if (error || !sdk) return <div>SDK failed to load</div>;
return (
<button onClick={() => sdk.promptSubscribe('supporter', 'bonus levels')}>
Unlock bonus levels
</button>
);
}Configuration
SubGamesProvider accepts the same config object as the Browser SDK:
interface SubGamesConfig {
gameKey: string;
apiUrl?: string;
appUrl?: string;
overlay?: boolean;
}You can also override the script URL when testing locally:
<SubGamesProvider
config={{ gameKey: 'my-platformer' }}
scriptUrl="http://localhost:3001/dist/sdk.js"
>
<Game />
</SubGamesProvider>Hook API
useSubGames() returns the current SDK state:
const { sdk, loading, error } = useSubGames();| Field | Type | Description |
|---|---|---|
sdk | ISubGamesSDK | null | SDK instance after the script loads |
loading | boolean | Whether the script is still loading |
error | Error | null | Script load or init error |
Once loaded, sdk exposes the same methods as the Browser SDK, including tier checks, login prompts, subscribe prompts, pause events, and token access.
Notes
- The React package does not reimplement the SDK. It wraps the browser SDK and keeps the public API aligned.
- The default production script URL is
https://sdk.sub.games/sdk.js. - For server-side access control, pair this with the Server SDK.