React Integration

npm install noblocky

import { useEffect, useState } from 'react';
import { detectAdblock, type NoBlockyResult } from 'noblocky';

export function AdblockStatus() {
	const [status, setStatus] = useState<'idle' | 'running' | 'done' | 'error'>('idle');
	const [result, setResult] = useState<NoBlockyResult | null>(null);

	useEffect(() => {
		let mounted = true;
		setStatus('running');
		detectAdblock({ timeout: 3000, debug: false })
			.then((r) => { 
				if (mounted) { 
					setResult(r); 
					setStatus('done');
					console.log('Strategy results:', r.strategyResults);
				} 
			})
			.catch((e) => { if (mounted) { setStatus('error'); console.error(e); } });
		return () => { mounted = false; };
	}, []);

	return <div>
		{status === 'running' && 'Detecting…'}
		{status === 'done' && (
			<div>
				<div>Blocked: {result?.isBlocked ? 'Yes' : 'No'}</div>
				<div>Confidence: {result?.confidence}</div>
				<div>Strategies: {result?.strategyResults?.length || 0}</div>
			</div>
		)}
		{status === 'error' && 'Detection failed'}
	</div>;
}

import { detectAdblock, type NoBlockyResult } from 'noblocky';

detectAdblock({
	debug: true,
	timeout: 5000,
	adSelectors: ['.advertisement', '.ad-banner'],
	checkParent: true,
	onDetect: (result: NoBlockyResult) => {
		console.log('Adblock detected!', {
			confidence: result.confidence,
			strategies: result.strategyResults.map(s => s.strategy),
			detectorCount: result.strategyResults.reduce((acc, s) => acc + s.detectorResults.length, 0)
		});
		// Show user-friendly message or alternative content
	},
	onNotDetect: (result: NoBlockyResult) => {
		console.log('No adblock detected', result);
		// Continue with normal ad loading
	},
	useRedirect: false,
	redirectUrl: '/please-disable-adblock'
});