Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scthakuri/react-adblock-detector
CHPADBLOCK is the adblock detector package for react. Our package detects most of the adblock extension such as ublock, adblock plus and many more.
https://github.com/scthakuri/react-adblock-detector
adblock adblock-detetcor anti-adblock anti-adblocker react-adblock-detector
Last synced: about 2 months ago
JSON representation
CHPADBLOCK is the adblock detector package for react. Our package detects most of the adblock extension such as ublock, adblock plus and many more.
- Host: GitHub
- URL: https://github.com/scthakuri/react-adblock-detector
- Owner: scthakuri
- Created: 2023-09-09T13:05:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-14T08:23:37.000Z (over 1 year ago)
- Last Synced: 2024-12-02T19:17:31.632Z (about 2 months ago)
- Topics: adblock, adblock-detetcor, anti-adblock, anti-adblocker, react-adblock-detector
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@scthakuri/adblock-detector
- Size: 171 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Ad Block Detector
CHPADBLOCK is the adblock detector package for react. Our package detects most of the adblock extension such as ublock, adblock plus and many more.
**[View Live Demo on Sandbox](https://codesandbox.io/s/async-hill-2gdkmp)**
[](https://www.npmjs.com/package/@scthakuri/adblock-detector)
[](https://www.npmjs.com/package/@scthakuri/adblock-detector)
[](https://github.com/scthakuri/react-adblock-detector/blob/master/lib/index.d.ts)
[](https://snyk.io/test/github/scthakuri/react-adblock-detector)
## Features
✅ Adblock Detector Modal
✅ Ease of use
✅ Well-tested
✅ Lightweight
✅ MIT license
### Installation
```bash
# Via npm:
npm i @scthakuri/adblock-detector
# Via yarn:
yarn add @scthakuri/adblock-detector
```
### Usage:
```javascript
import { DetectAdblock } from '@scthakuri/adblock-detector';
DetectAdblock((detected) => {
if( detected ){
// Adblock is detected
}else{
// Adblock is not detected
}
});
```
### ``
Modal to show if adblock is detected
**Props**
- [`theme`] \(String\): (`optional`) Any form of valid color code
- [`title`] \(String\): (`optional`) Adblock Detected title
- [`message`] \(String\): (`optional`) Adblock Detected title
- [`closeBtn`] \(Boolean\): (`optional`) Whether to include close button on modal or not
- [`onModalClose`] \(Function\): Modal doesn't automatically close. You have to manually close the modal as show in example below
- [`reloadBtnText`] \(String\): (`Optional`) Text for Reload Button
**Example**
***[View Live Demo on Sandbox](https://codesandbox.io/s/async-hill-2gdkmp)***
```javascript
import { useState, useEffect } from 'react';
import './App.css';
import DetectorModal, { DetectAdblock } from '@scthakuri/adblock-detector'
function App() {
const [startDetect, setStartDetect] = useState(true);
const [detected, setDetected] = useState(false);
const [showModal, setShowModal] = useState(false);
useEffect(() => {
if( startDetect ){
DetectAdblock((enable) => {
setStartDetect(false);
setDetected(enable);
if( enable ){
setShowModal(true);
}
});
}
}, [startDetect])
return (
{
startDetect ? "Detecting . . ." :
detected ? "Detected" : "Not Detected"
}
{
showModal && setShowModal(false)}
closeBtn
/>
}
);
}
export default App;
```
### Tested With
- ☞ Adblock Plus
- ☞ Adblock
- ☞ Adguard
- ☞ Adremover
- ☞ Adblock for Chrome™
- ☞ Brave
- ☞ Ghostery
- ☞ uBlocker
- ☞ uBlock
- ☞ Ultrablock
- ☞ Privacy Badger
- ☞ DuckDuckGo
- ☞ Disconnect
- ☞ Microsoft Edge AdBlock extension
- ☞ Firefox Tracking Protection
- ☞ uBlock Origin
- ☞ Fair AdBlocker
- ☞ Hola ad remover
- ☞ Comodo AdBlocker
- ☞ Opera Built-in AdBlock extension