react-adblocker-detect

Detect ad blockers in React and ask visitors to disable them, with a built-in modal.

Detection result

Two signals: a bait element (works offline) and a network probe. If your browser has a blocker enabled, this flips to true and the dialog appears.

status: checking…
mode: dismissible

Position

The dialog is positionable. On screens under 480px it becomes a bottom sheet regardless — resize this page to see it.

Theme

Colours are CSS custom properties, set from the theme option. colorScheme follows the OS by default.

Accent

Colour scheme

Behaviour

Usage

tsx

import { AdblockDetector } from "react-adblocker-detect";import "react-adblocker-detect/style.css";
<AdblockDetector  config={{    position: "bottom",    theme: { primary: "#22c55e" },    detection: { method: "bait" },  }}/>

Just the hook

tsx

import { useAdblockDetection } from "react-adblocker-detect";
const { isAdBlocked, isChecked, recheck } = useAdblockDetection();