A lightweight, customizable React component that detects AdBlock usage and shows a user-friendly modal with instructions to disable it. Supports persistent detection and polling behavior.
npm i react-adblocker-detect
yarn add react-adblocker-detect
pnpm i react-adblocker-detect
bun add react-adblocker-detectAccess Demos at:
- Detects common adblockers
- Beautiful modal UI with step-by-step disable instructions
- Persistent and polling behavior options
- Fully configurable via props
- Written in TypeScript
// app.tsx or main.tsx
import React from "react";
import { AdblockDetector } from "react-adblock-detector";
import "react-adblock-detector/dist/index.css";
const App = () => {
return (
<div>
<AdblockDetector
config={{
persistent: true,
pollingTime: 10000, // in milliseconds
title: "AdBlocker Detected!",
}}
/>
</div>
);
};
export default App;// _app.tsx
import React from "react";
import type { AppProps } from "next/app";
import { CookieConsent } from "react-consent-management-banner";
import "react-consent-management-banner/dist/index.css";
function MyApp({ Component, pageProps }: AppProps) {
return (
<React.Fragment>
<Component {...pageProps} />
<AdblockDetector
config={{
persistent: true,
pollingTime: 10000, // in milliseconds
title: "AdBlocker Detected!",
}}
/>
</React.Fragment>
);
}// layout.tsx
import React from "react";
import { AdblockDetector } from "react-adblock-detector";
import "react-adblock-detector/dist/index.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html>
<body>
{children}
<AdblockDetector
config={{
persistent: true,
pollingTime: 10000, // in milliseconds
title: "AdBlocker Detected!",
}}
/>
</body>
</html>
);
}The AdblockDetector component accepts a config prop of type Partial<IAdBlockerConfig>.
const defaultConfig = {
persistent: false,
title: "AdBlocker Detected",
howToTitle: "How to Disable the Adblocker",
description:
"We noticed you're using an ad blocker. Please disable it so we can keep the site running.",
btn1Title: "How to disable adblocker",
btn2Title: "I have disabled my adblocker",
howToSteps: [
{
title: "Step 1: Click on the Extensions Icon",
description:
"At the top-right of your browser, click the puzzle piece icon to see all extensions.",
},
{
title: "Step 2: Open AdBlock Settings",
description:
"Click the AdBlock or AdBlock Plus icon from the list. Then click the settings gear or options.",
},
{
title: "Step 3: Pause or Whitelist",
description: `Choose "Pause on this site" or "Don't run on this site" depending on your extension.`,
},
{
title: "Step 4: Refresh the Page",
description:
"Reload the page to check if the content is now visible. Enjoy the experience!",
},
],
pollingTime: undefined, // in milliseconds
initialInterval: 200, // delay before showing the modal initially
persistSetting: true, // store detection state in localStorage
};A custom React hook that returns true if adblocker is detected. Used internally by AdblockDetector, but can be used separately if you need raw detection logic.
- Closeable: If
persistent: false, the modal can be closed after user claims they disabled adblock. - Persistent: If
persistent: true, the modal keeps rechecking adblock status at intervals usingpollingTime.
This library stores a flag (rad_adblocker) in localStorage to avoid showing the modal again unnecessarily when not in persistent mode.
Developed with ❤️ by Farasat Ali Feedback and contributions welcome!