React SDK

SPA navigation with useEzoicPageView

Single-page apps (React Router, Next.js app router, or any client-side router) need to tell Ezoic when the "page" changes without a full reload, so ads refresh for the new route.

What this demonstrates

useEzoicPageView(pageKey) is router-agnostic: call it with whatever string identifies the current route (pathname, route name, etc). At boot the provider pushes setIsSinglePageApplication(true); on every pageKey change the hook destroys the departing placements and calls showAds(newIds) for the new route's ids. The bundled sa.min.js also patches pushState and runs its own SPAMonitor with a 1000 ms debounce — the hook coalesces with it rather than double-firing a refresh.

View source on GitHub →

SDK docs: README — SPA routing

Hook usage

import { useEzoicPageView, EzoicAd } from '@ezoic/react-sdk';

function Page({ route }) {
  useEzoicPageView(route, { ids: [922, 923] });
  return (
    <>
      <EzoicAd id={922} sizes={['728x90']} required />
      <EzoicAd id={923} sizes={['300x250']} required />
    </>
  );
}

Live demo

The panel below embeds the SDK's own demo app (built from @ezoic/react-sdk v1.0.0) — use its "SPA navigation" panel to simulate route changes and watch the event log for destroy/showAds pairs. Open the full demo in a new tab →