React & React NativeUpdated Jun 2

Step 3: Framework recipes (Vite, Next.js, CRA)

The useRewardedAd hook works in every React setup. The only thing that differs per framework is where the SDK script loads and how you read your API key from the environment.

There is no npm package

AppLixir ships as a single CDN script. Don't npm install anything — load the <script> and use the global. This keeps you on the latest patched build with no bundler config.

Vite

Add the script to index.html (at the project root, not in public/):

<!-- index.html -->
<head>
  <script src="https://cdn.applixir.com/applixir.app.v6.1.0.js" async></script>
</head>

Read the API key from a Vite env var (must be prefixed VITE_):

# .env
VITE_APPLIXIR_API_KEY=xxxx-xxxx-xxxx-xxxx

const { ready, showAd } = useRewardedAd({
  apiKey: import.meta.env.VITE_APPLIXIR_API_KEY,
});

Next.js (App Router)

The SDK is browser-only, so the component that calls it must be a client component. Load the script with next/script and guard against SSR.

// app/components/WatchAdButton.jsx
"use client";

import Script from "next/script";
import { useRewardedAd } from "../hooks/useRewardedAd";

export default function WatchAdButton() {
  const { ready, showAd } = useRewardedAd({
    apiKey: process.env.NEXT_PUBLIC_APPLIXIR_API_KEY,
  });

  return (
    <>
      <Script
        src="https://cdn.applixir.com/applixir.app.v6.1.0.js"
        strategy="afterInteractive"
      />
      <div id="applixir-ad-container" />
      <button disabled={!ready} onClick={() => showAd()}>
        {ready ? "Watch ad" : "Loading…"}
      </button>
    </>
  );
}

# .env.local
NEXT_PUBLIC_APPLIXIR_API_KEY=xxxx-xxxx-xxxx-xxxx

Notes:

The hook already guards with typeof window !== "undefined", so it is safe to import anywhere — but only call showAd() from a client component.
If you load the script via next/script (as above) you can drop the hook's own injector; it detects the existing global and resolves immediately.

Next.js (Pages Router)

Put the <Script> in pages/_app.jsx, or add a plain <script> in a custom pages/_document.jsx <Head>. Everything else is identical.

Create React App

Add the script to public/index.html:

<!-- public/index.html -->
<head>
  <script src="https://cdn.applixir.com/applixir.app.v6.1.0.js" async></script>
</head>

Read the key from a CRA env var (must be prefixed REACT_APP_):

# .env
REACT_APP_APPLIXIR_API_KEY=xxxx-xxxx-xxxx-xxxx

const { ready, showAd } = useRewardedAd({
  apiKey: process.env.REACT_APP_APPLIXIR_API_KEY,
});

Phaser inside React

If you embed a Phaser game in a React app, render the anchor div outside the Phaser canvas and call showAd() from a Phaser scene's input handler:

this.input.on("pointerdown", async () => {
  this.scene.pause();              // pause the game loop while the ad plays
  const watched = await showAd();  // showAd from your React bridge / context
  this.scene.resume();
  if (watched) grantReward();
});

Expose showAd to Phaser via a ref, a small event bus, or React context — the ad logic stays in React; Phaser only triggers it.

Next: React Native (WebView).

Vite​

Next.js (App Router)​

Next.js (Pages Router)​

Create React App​

Phaser inside React​

Vite

Next.js (App Router)

Next.js (Pages Router)

Create React App

Phaser inside React