React Integration

Hooks und Provider fuer React 17+ und Next.js Projekte.

Installation

npm install @breakpilot/consent-sdk

Provider Setup

Umschliessen Sie Ihre App mit dem ConsentProvider:

app/layout.tsx

import { ConsentProvider } from '@breakpilot/consent-sdk/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de">
      <body>
        <ConsentProvider
          config={{
            apiEndpoint: process.env.NEXT_PUBLIC_CONSENT_API!,
            siteId: 'my-site',
            debug: process.env.NODE_ENV === 'development',
          }}
        >
          {children}
        </ConsentProvider>
      </body>
    </html>
  );
}

useConsent Hook

Verwenden Sie den Hook in jeder Komponente:

components/Analytics.tsx

import { useConsent } from '@breakpilot/consent-sdk/react';

export function Analytics() {
  const { hasConsent, acceptAll, rejectAll, showSettings } = useConsent();

  if (!hasConsent('analytics')) {
    return null;
  }

  return (
    <Script
      src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
      strategy="afterInteractive"
    />
  );
}

ConsentGate Component

Zeigt Inhalte nur wenn Consent vorhanden ist:

components/YouTubeEmbed.tsx

import { ConsentGate } from '@breakpilot/consent-sdk/react';

export function YouTubeEmbed({ videoId }: { videoId: string }) {
  return (
    <ConsentGate
      category="social"
      fallback={
        <div className="bg-gray-100 p-4 rounded-lg text-center">
          <p>Video erfordert Ihre Zustimmung.</p>
          <button onClick={() => showSettings()}>
            Einstellungen oeffnen
          </button>
        </div>
      }
    >
      <iframe
        src={`https://www.youtube.com/embed/${videoId}`}
        width="560"
        height="315"
        allowFullScreen
      />
    </ConsentGate>
  );
}

Custom Cookie Banner

components/CookieBanner.tsx

import { useConsent } from '@breakpilot/consent-sdk/react';

export function CookieBanner() {
  const {
    isBannerVisible,
    acceptAll,
    rejectAll,
    showSettings,
  } = useConsent();

  if (!isBannerVisible) return null;

  return (
    <div className="fixed bottom-0 inset-x-0 bg-white border-t shadow-lg p-4">
      <div className="max-w-4xl mx-auto flex items-center justify-between">
        <p className="text-sm text-gray-600">
          Wir verwenden Cookies um Ihr Erlebnis zu verbessern.
        </p>
        <div className="flex gap-2">
          <button
            onClick={rejectAll}
            className="px-4 py-2 text-sm border rounded"
          >
            Ablehnen
          </button>
          <button
            onClick={showSettings}
            className="px-4 py-2 text-sm border rounded"
          >
            Einstellungen
          </button>
          <button
            onClick={acceptAll}
            className="px-4 py-2 text-sm bg-blue-600 text-white rounded"
          >
            Alle akzeptieren
          </button>
        </div>
      </div>
    </div>
  );
}

Hook API

Property	Typ	Beschreibung
`hasConsent`	`(category) => boolean`	Prueft Consent fuer Kategorie
`consent`	`ConsentState \| null`	Aktueller Consent-Status
`acceptAll`	`() => Promise`	Akzeptiert alle Kategorien
`rejectAll`	`() => Promise`	Lehnt alle ab (ausser essential)
`setConsent`	`(input) => Promise`	Setzt spezifische Kategorien
`isBannerVisible`	`boolean`	Banner sichtbar?
`showBanner`	`() => void`	Zeigt den Banner
`showSettings`	`() => void`	Oeffnet Einstellungen