React Integration

📝 Basic Implementation

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

function AdblockDetector() {
  const [isBlocked, setIsBlocked] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function check Adblock() {
      try {
        const result = await detectAdblock({
          timeout: 5000,
          debug: true
        });
        
        setIsBlocked(result.isBlocked);
      } catch (error) {
        console.error('Detection failed:', error);
      } finally {
        setLoading(false);
      }
    }

    checkAdblock();
  }, []);

  if (loading) return <div>Checking...</div>;

  return (
    <div>
      <h2>Adblock Status</h2>
      <p>{isBlocked ? '🚫 Blocked' : '✅ Not Blocked'}</p>
    </div>
  );
}

export default AdblockDetector;

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

function useAdblockDetection() {
  const [detection, setDetection] = useState<NoBlockyResult | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function detect() {
      const result = await detectAdblock();
      setDetection(result);
      setLoading(false);
    }
    detect();
  }, []);

  return { detection, loading };
}

// Usage in component
function MyComponent() {
  const { detection, loading } = useAdblockDetection();
  
  if (loading) return <div>Loading...</div>;
  
  return <div>{detection?.isBlocked ? 'Blocked' : 'Clear'}</div>;
}

📦 Installation

npm install @wildebeest-webtech/noblocky

import { detectAdblock } from 'noblocky';

⚙️ Advanced Configuration

For complete configuration options including custom detectors, callbacks, timeout settings, and advanced features, visit the advanced configuration page.