Integration time3 minutes

How to Add Ads to React with Buzer (2026 Guide)

React is the most popular JavaScript library for building user interfaces, powering millions of websites and applications. Buzer provides a clean, component-friendly integration for React apps. Whether you are using Create React App, Vite, or a custom setup, adding Buzer ads takes just a few minutes.

Step-by-Step Integration

Sign up for Buzer

Create your Buzer publisher account at buzer.xyz with Face ID or Touch ID. No crypto knowledge needed.

Add the Buzer script to your HTML

Add the Buzer ad script to your public/index.html file (or your root HTML template). Place it before the closing body tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
  <script async src="https://cdn.buzer.xyz/x402-ad.js"></script>
</body>
</html>

Create a BuzerAd component

Create a reusable React component for ad placements. The component uses useEffect to ensure the ad slot is refreshed when the component mounts or the size prop changes.

javascript

import { useEffect, useRef } from 'react';

export function BuzerAd({ size = '300x250' }: { size?: string }) {
  const adRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Trigger Buzer to scan for new ad slots
    if (window.buzer && adRef.current) {
      window.buzer.refresh(adRef.current);
    }
  }, [size]);

  return (
    <div
      ref={adRef}
      data-buzer-ad
      data-size={size}
      style={{ display: 'flex', justifyContent: 'center' }}
    />
  );
}

Use the component in your app

Import BuzerAd and place it anywhere in your React component tree. Pass the desired ad size as a prop.

javascript

import { BuzerAd } from './components/BuzerAd';

function BlogPost() {
  return (
    <div className="blog-post">
      <h1>Article Title</h1>
      <p>Introductory paragraph...</p>
      <BuzerAd size="728x90" />
      <p>Rest of the article content...</p>
      <BuzerAd size="300x250" />
    </div>
  );
}

Why React Developers Need a Modern Ad Solution

Most ad networks were designed for server-rendered HTML pages. They use document.write, inject iframes synchronously, and assume the DOM is static. In a React single-page application, this causes problems: ads break on route changes, scripts conflict with React's virtual DOM, and performance suffers.

Buzer was built for modern web apps. The ad script uses DOM observation (MutationObserver) to detect ad containers as they are added to the page. This means ads work correctly with React's component lifecycle, client-side routing, and lazy loading.

With 85% revenue share and instant USDC payments, Buzer is the best ad network for React developers who want to monetize without sacrificing their app's performance or user experience.

TypeScript Support for React + Buzer

If your React project uses TypeScript, you can add type declarations for the Buzer global object. Create a buzer.d.ts file in your src directory to avoid type errors when calling window.buzer methods.

The Buzer API surface is minimal: window.buzer.refresh(element) triggers ad loading for a specific container, and window.buzer.destroyAll() removes all ads (useful for cleanup in useEffect return functions).

All data attributes (data-buzer-ad, data-size) work with JSX and TSX without any special configuration.

Frequently Asked Questions

Do Buzer ads work with React Router?+

Yes. The Buzer script uses a MutationObserver to detect new ad containers in the DOM. When React Router renders a new page component, any BuzerAd components in that page will be detected and filled automatically.

Can I use Buzer in a React app created with Vite?+

Yes. Add the script tag to your index.html file in the project root. The BuzerAd component works the same way regardless of your build tool — Vite, Create React App, or a custom webpack setup.

How do I prevent layout shift from Buzer ads in React?+

Set explicit width and height on your BuzerAd container to reserve space before the ad loads. For example, a 300x250 ad container should have style={{ width: 300, height: 250 }}. This prevents CLS (Cumulative Layout Shift).

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start Earning Advertise With Us