Detect AdBlock React

AdBlock detector for React. Live example - detect-adblock-react.ivanadmaers.com

Features

• ✅ Ease of use
• 🔧 Well-tested
• 📦 Lightweight
• 📝 MIT license
• 🎉 NextJS, GatsbyJS and RemixJS support

Installation

# Via npm:
npm i detect-adblock-react

# Via yarn:
yarn add detect-adblock-react

Usage

import React from 'react';
import { useDetectAdblock } from 'detect-adblock-react';

const App = () => {
  const { adBlockDetected } = useDetectAdblock();

  return (
    <div>
      {adBlockDetected === null && <p>Defining…</p>}
      {adBlockDetected === false && <p>AdBlock was not detected</p>}
      {adBlockDetected === true && <p>AdBlock was detected</p>}
    </div>
  );
};

export default App;

Hook returns

adBlockDetected - was AdBlock detected or not. Null only when defining for the first time - null | boolean

detect - call this function if you need to check AdBlock one more time - function

const { adBlockDetected, detect } = useDetectAdblock();

useEffect(() => {
  setTimeout(() => {
    // Check AdBlock again after time
    detect();
  }, 5 * 1000);
}, []);

Local development

1. Clone the project

2. Run

npm ci i

npm start

The last command runs webpack to compile our package to a dist folder

3. cd example/

4. Run

npm ci i

npm start

The last command runs webpack dev server

5. Enjoy the magic!

License

MIT

Copyright (c) 2022-present, Ivan Admaers