> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adxensor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Integrate AdXensor ads into any React app with Vite, Create React App, or any other bundler using the publisher SDK.

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

```bash theme={null}
npm install @adxensor/publisher-sdk
```

## Basic setup

<Steps>
  <Step title="Create a reusable AdSlot component">
    ```tsx theme={null}
    // 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}
        />
      );
    }
    ```
  </Step>

  <Step title="Set your Site ID in the environment">
    <CodeGroup>
      ```bash .env (Vite) theme={null}
      VITE_ADXENSOR_SITE_ID=pub-XXXXXXXX
      ```

      ```bash .env (Create React App) theme={null}
      REACT_APP_ADXENSOR_SITE_ID=pub-XXXXXXXX
      ```
    </CodeGroup>
  </Step>

  <Step title="Use the component anywhere">
    ```tsx theme={null}
    // 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>
      );
    }
    ```
  </Step>
</Steps>

## React Router — handling navigation

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

```tsx theme={null}
// 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:

```tsx theme={null}
// 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:

```tsx theme={null}
// 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>
  );
}
```

## AdSense-style push

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

```tsx theme={null}
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:

```html theme={null}
<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:

```typescript theme={null}
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:

```typescript theme={null}
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](/publishers/support/troubleshooting)