react-google-ads-advanced

Google AdSense for React that collapses unfilled slots instead of leaving blank gaps.

Unfilled slots, handled

AdSense marks a slot unfilled when it has nothing to serve. Left alone that is a blank rectangle in your layout. Trigger either outcome below.

status: waiting — space reserved (90px)

Layout stability

Unreserved ad slots are a leading cause of Cumulative Layout Shift. The slot above reserves minHeight: 90 before the ad resolves, then releases it — so the page never jumps.

tsx

<GoogleAd clientId="ca-pub-XXXX" slot="123" minHeight={90} />

Lazy loading

Defer the request until the slot nears the viewport. Off by default — a slot that is never requested never earns, so lazy-load the ones well below the fold rather than all of them.

tsx

<GoogleAd clientId="ca-pub-XXXX" slot="123" lazy={400} />

Usage

tsx

import { AdSenseScript, GoogleAd } from "react-google-ads-advanced";import "react-google-ads-advanced/style.css";
export default function Layout({ children }) {  return (    <>      <AdSenseScript clientId="ca-pub-XXXX" enabled={hasAdConsent} />      {children}      <GoogleAd        clientId="ca-pub-XXXX"        slot="1234567890"        minHeight={90}        fallback={<NewsletterSignup />}      />    </>  );}