Integração com React / SPA

Método 1: Via index.html (Recomendado)

A forma mais simples: adicione o script diretamente no HTML base da aplicação.

Create React App / Vite

<!-- public/index.html (CRA) ou index.html (Vite) -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Minha App React</title>

  <!-- Cookield CMP — adicionar antes de outros scripts -->
  <script src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js" async></script>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Método 2: Carregamento dinâmico via useEffect

Se preferir carregar o script programaticamente (útil para carregamento condicional):

// src/hooks/useCookield.ts
import { useEffect } from 'react';

const BANNER_ID = 'SEU_BANNER_ID';

export function useCookield() {
  useEffect(() => {
    // Evitar duplicação
    if (document.getElementById('cookield-script')) return;

    const script = document.createElement('script');
    script.id = 'cookield-script';
    script.src = `https://cdn.cookield.io/banner/${BANNER_ID}.js`;
    script.async = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup (opcional - geralmente não necessário)
      const el = document.getElementById('cookield-script');
      if (el) el.remove();
    };
  }, []);
}

// src/App.tsx
import { useCookield } from './hooks/useCookield';

function App() {
  useCookield();

  return (
    <div>
      {/* Seu app */}
    </div>
  );
}

export default App;

Ouvindo eventos de consentimento

A Cookield dispara eventos customizados no window que você pode ouvir para reagir a mudanças de consentimento:

// src/hooks/useConsentListener.ts
import { useEffect, useState } from 'react';

interface ConsentState {
  necessary: boolean;
  analytics: boolean;
  marketing: boolean;
  functionality: boolean;
}

export function useConsentListener() {
  const [consent, setConsent] = useState<ConsentState | null>(null);

  useEffect(() => {
    function handleConsent(event: CustomEvent<ConsentState>) {
      setConsent(event.detail);
    }

    window.addEventListener(
      'cookield:consent',
      handleConsent as EventListener
    );

    return () => {
      window.removeEventListener(
        'cookield:consent',
        handleConsent as EventListener
      );
    };
  }, []);

  return consent;
}

// src/components/AnalyticsWidget.tsx
import { useConsentListener } from '../hooks/useConsentListener';

export function AnalyticsWidget() {
  const consent = useConsentListener();

  if (!consent?.analytics) {
    return <p>Aceite cookies de analytics para ver este widget.</p>;
  }

  return <div>{/* Widget de analytics */}</div>;
}

Tipos TypeScript

Adicione tipagem para os eventos e API global da Cookield:

// src/types/cookield.d.ts

interface CookieldConsentDetail {
  necessary: boolean;
  analytics: boolean;
  marketing: boolean;
  functionality: boolean;
  timestamp: string;
  source: 'banner' | 'preferences' | 'api';
}

interface CookieldAPI {
  /** Abre o painel de preferências */
  showPreferences: () => void;
  /** Retorna o estado atual do consentimento */
  getConsent: () => CookieldConsentDetail | null;
  /** Aceita todas as categorias */
  acceptAll: () => void;
  /** Rejeita todas as categorias (exceto necessárias) */
  rejectAll: () => void;
  /** Atualiza categorias específicas */
  updateConsent: (categories: Partial<CookieldConsentDetail>) => void;
}

declare global {
  interface Window {
    cookield?: CookieldAPI;
  }

  interface WindowEventMap {
    'cookield:consent': CustomEvent<CookieldConsentDetail>;
    'cookield:ready': CustomEvent<void>;
  }
}

Com esses tipos, você terá autocomplete e type-safety ao interagir com a API da Cookield.

Usando a API global

Após o script carregar, a API fica disponível em window.cookield:

// Exemplo: botão para abrir preferências
function CookiePreferencesButton() {
  const handleClick = () => {
    window.cookield?.showPreferences();
  };

  return (
    <button onClick={handleClick}>
      Gerenciar cookies
    </button>
  );
}

// Exemplo: checar consent antes de carregar um script
function loadAnalytics() {
  const consent = window.cookield?.getConsent();
  if (consent?.analytics) {
    // Carregar script de analytics
  }
}