sub.games

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/react

The 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();
FieldTypeDescription
sdkISubGamesSDK | nullSDK instance after the script loads
loadingbooleanWhether the script is still loading
errorError | nullScript 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.

On this page