anti-adblock-detector

A powerful, lightweight, and professional anti-adblock detection library for React and Vanilla JavaScript. Protect your website's ad revenue with multiple detection strategies and a stunning, customizable overlay.

Features

• 🛡️ Triple Detection: Uses 3 independent strategies (Bait Element, Fake Script, Fetch Test) for maximum accuracy.
• ⚛️ React Component: Simple <AntiAdBlock /> drop-in component.
• 🪝 React Hook: useAdBlockDetector() hook for custom UI implementations.
• 🍦 Vanilla JS: detectAdBlocker() function for non-React projects.
• 🎨 Premium UI: Glassmorphism overlay with smooth animations.
• 🔒 Hard Block Mode: Optionally prevent site access until ad blocker is disabled.
• ♻️ Recheck Support: Users can recheck after disabling their ad blocker.
• 📱 Fully Responsive: Looks great on desktop and mobile.
• 🪶 Zero Dependencies: No external runtime dependencies.

Installation

npm install anti-adblock-detector
# or
yarn add anti-adblock-detector

Quick Start (React)

import { AntiAdBlock } from 'anti-adblock-detector';
import 'anti-adblock-detector/styles.css';

function App() {
  return (
    <>
      <AntiAdBlock 
        onDetected={(result) => console.log('Ad blocker detected!', result)}
        onDismissed={() => console.log('User chose to continue')}
      />
      <div>Your website content here...</div>
    </>
  );
}

Hard Block Mode

Force users to disable their ad blocker before accessing the site:

<AntiAdBlock 
  hardBlock={true}
  title="Please Support Us"
  description="This content is only available without an ad blocker."
/>

Custom Hook

Build your own UI with the useAdBlockDetector hook:

import { useAdBlockDetector } from 'anti-adblock-detector';

function CustomBanner() {
  const { loading, detected, recheck } = useAdBlockDetector();

  if (loading) return <p>Checking...</p>;
  if (!detected) return null;

  return (
    <div className="my-custom-banner">
      <p>We noticed you're using an ad blocker. Please support us!</p>
      <button onClick={recheck}>I've disabled it</button>
    </div>
  );
}

Vanilla JavaScript

import { detectAdBlocker } from 'anti-adblock-detector';

async function checkAds() {
  const result = await detectAdBlocker();
  
  if (result.detected) {
    alert('Ad blocker detected!');
    console.log('Strategies:', result.strategies);
  }
}

checkAds();

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | enabled | boolean | true | Enable/disable detection. | | hardBlock | boolean | false | If true, user cannot dismiss the overlay. | | title | string | "Ad Blocker Detected" | Modal title text. | | description | string | "We rely on ads..." | Modal description text. | | primaryButtonText | string | "I've Disabled My Ad Blocker" | Primary button label. | | dismissButtonText | string | "Continue Without Disabling" | Dismiss button label. | | tipText | string | "After disabling..." | Tip text at the bottom. | | delay | number | 500 | Delay (ms) before showing the modal. | | onDetected | (result) => void | - | Callback when ad blocker is detected. | | onAllowed | () => void | - | Callback when user confirms disable. | | onDismissed | () => void | - | Callback when user dismisses overlay. | | children | ReactNode | - | Render your own custom modal content. |

How Detection Works

The library uses three independent detection strategies:

1. Bait Element: Creates a hidden DOM element with common ad-related class names (e.g., ad-banner, adsbox). If the element gets hidden/removed by an ad blocker, detection is positive.
2. Fake Script: Attempts to load a script from Google AdSense's URL. If blocked, detection is positive.
3. Fetch Test: Makes a HEAD request to a known ad-serving domain. If the request fails, detection is positive.

If any strategy returns positive, the ad blocker is considered active.

License

MIT © Antigravity