React

AdXensor integrates cleanly with any React application using the npm package. The SDK is fully compatible with Vite, Create React App, and any other React bundler.

Installation

npm install @adxensor/publisher-sdk

Basic setup

Create a reusable AdSlot component

// src/components/AdSlot.tsx
import { useEffect, useRef } from 'react';
import { AdXensor } from '@adxensor/publisher-sdk';
import type { AdFormat } from '@adxensor/publisher-sdk';

interface AdSlotProps {
  slot: string;
  format?: AdFormat | 'auto';
  className?: string;
}

export function AdSlot({ slot, format = 'auto', className }: AdSlotProps) {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!ref.current) return;

    const adx = AdXensor.getInstance({
      siteId: import.meta.env.VITE_ADXENSOR_SITE_ID, // or process.env.REACT_APP_ADXENSOR_SITE_ID
    });

    adx.init();
    adx.fill(ref.current, { format });
  }, [slot, format]);

  return (
    <ins
      ref={ref}
      className={`adxensor${className ? ` ${className}` : ''}`}
      style={{ display: 'block' }}
      data-ad-slot={slot}
      data-ad-format={format}
    />
  );
}

Set your Site ID in the environment

VITE_ADXENSOR_SITE_ID=pub-XXXXXXXX

REACT_APP_ADXENSOR_SITE_ID=pub-XXXXXXXX

Use the component anywhere

// src/App.tsx
import { AdSlot } from './components/AdSlot';

function App() {
  return (
    <div>
      <header>
        <AdSlot slot="header-banner" format="728x90" />
      </header>

      <main>
        <h1>Article title</h1>
        <p>…content…</p>
        <AdSlot slot="in-content" format="300x250" />
        <p>…more content…</p>
      </main>

      <aside>
        <AdSlot slot="sidebar" format="300x600" />
      </aside>
    </div>
  );
}

When using React Router, ads need to be re-initialized on each route change. Add an AdXensorProvider at the router root:

// src/components/AdXensorProvider.tsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { AdXensor } from '@adxensor/publisher-sdk';

export function AdXensorProvider({ children }: { children: React.ReactNode }) {
  const location = useLocation();

  useEffect(() => {
    AdXensor.reset();
    AdXensor.getInstance({
      siteId: import.meta.env.VITE_ADXENSOR_SITE_ID,
    }).init();
  }, [location.pathname]);

  return <>{children}</>;
}

Wrap your routes with it:

// src/main.tsx
import { BrowserRouter } from 'react-router-dom';
import { AdXensorProvider } from './components/AdXensorProvider';

root.render(
  <BrowserRouter>
    <AdXensorProvider>
      <App />
    </AdXensorProvider>
  </BrowserRouter>
);

Initializing once at app level

If you want a single initialization point instead of one per slot, use a top-level effect:

// src/App.tsx
import { useEffect } from 'react';
import { AdXensor } from '@adxensor/publisher-sdk';

function App() {
  useEffect(() => {
    const adx = AdXensor.getInstance({
      siteId: import.meta.env.VITE_ADXENSOR_SITE_ID,
      lazyLoad: true,
      debug: import.meta.env.DEV,
    });
    adx.init(); // fills all <ins class="adxensor"> already in the DOM

    return () => {
      adx.destroy(); // cleanup on unmount (dev strict mode)
    };
  }, []);

  return (
    <div>
      {/* Slots use HTML directly — SDK fills them automatically */}
      <ins
        className="adxensor"
        style={{ display: 'block' }}
        data-ad-slot="header-banner"
        data-ad-format="728x90"
      />
    </div>
  );
}

If you prefer the AdSense push pattern, use the push() method instead:

useEffect(() => {
  const adx = AdXensor.getInstance({ siteId: 'pub-XXXXXXXX' });
  adx.push({ format: '300x250' }); // fills the next unfilled slot
}, []);

Lazy loading per slot

Lazy loading is enabled by default — each slot loads when it enters the viewport. Disable it per slot if needed:

<ins
  className="adxensor"
  style={{ display: 'block' }}
  data-ad-slot="above-fold"
  data-ad-format="728x90"
  data-ad-lazy   {/* remove this attribute to disable lazy loading for this slot */}
/>

Or disable globally at initialization:

AdXensor.getInstance({ siteId: 'pub-XXXXXXXX', lazyLoad: false });

Environment variable reference

Bundler	Variable name
Vite	`VITE_ADXENSOR_SITE_ID`
Create React App	`REACT_APP_ADXENSOR_SITE_ID`

TypeScript support

The SDK ships full type declarations. All props and config options are typed:

import type { AdFormat, AdXensorConfig, SlotOptions } from '@adxensor/publisher-sdk';

Troubleshooting

Symptom	Solution
Slots stay blank	Make sure your site is approved in the dashboard and the Site ID is correct
Ads reload on every render	Wrap `adx.fill()` in `useEffect` with a stable dependency array
Missing env variable	Check that the variable is prefixed correctly for your bundler (e.g. `VITE_`)

→ Full troubleshooting guide

Getting Started

How AdXensor Works

Integration Guides

Reference

Support

Installation

Basic setup

React Router — handling navigation

Initializing once at app level

Lazy loading per slot

Environment variable reference

TypeScript support

Troubleshooting

​Installation

​Basic setup

​React Router — handling navigation

​Initializing once at app level

​AdSense-style push

​Lazy loading per slot

​Environment variable reference

​TypeScript support

​Troubleshooting

Installation

Basic setup

React Router — handling navigation

Initializing once at app level

AdSense-style push

Lazy loading per slot

Environment variable reference

TypeScript support

Troubleshooting