KATLA FÜR REACT
Cookie-Einwilligung für React, direkt in Ihrem Komponentenbaum.
Ein Provider, eine Handvoll typisierter Hooks und zwei ungestylte Komponenten. Die Entscheidung ist State, den Ihre Komponenten lesen und bei dessen Änderung sie neu rendern, der Cookie-Guard wird für Sie eingebunden, und das Banner können Sie umgestalten oder komplett ersetzen.
@katla.app/sdk/reactReact 18 und 19Vite, CRA, jeder Bundler
src/App.tsxVite + React
import { useEffect } from 'react'
import {
KatlaProvider,
CookieBanner,
useKatlaConsent,
} from '@katla.app/sdk/react'
function Analytics() {
const { consent } = useKatlaConsent()
useEffect(() => {
if (consent?.analytics) loadAnalytics()
}, [consent])
return null
}
export default function App() {
return (
<KatlaProvider siteId="your-site-id" googleConsentMode>
<Analytics />
<CookieBanner />
</KatlaProvider>
)
}Der Provider bindet Cookie-Guard und Consent-Bridge selbst einVollständige Anleitung →
WARUM REACT-WEBSITES MIT DER EINWILLIGUNG KÄMPFEN
Einwilligungsstatus und React-State sind dasselbe Problem, zweimal gelöst.
DAS PROBLEMDas Banner ist ein Drittanbieter-Skript, das das DOM von außerhalb von React verändert, und ein Re-Render oder ein Routenwechsel setzt es wieder zurück.
MIT KATLAStattdessen ein Provider und typisierte Hooks. Die Einwilligung lebt im Context, und die Komponenten, die sie lesen, rendern neu wie alles andere in Ihrem Baum.
DAS PROBLEMTags werden aus index.html geladen, bevor React gemountet ist, also kommt die Entscheidung lange nach den Cookies an.
MIT KATLAKatlaProvider bindet den Cookie-Guard beim Mounten ein. Ein Cookie, dessen Kategorie nicht erlaubt ist, wird an document.cookie abgewiesen, egal welches Tag es setzen wollte.
DAS PROBLEMEin gehostetes Banner ignoriert Ihr Designsystem, und es umzugestalten ist ein Kampf mit dem Stylesheet von jemand anderem.
MIT KATLACookieBanner liefert kein CSS mit: semantisches Markup mit stabilen katla-*-Klassennamen, ein Render-Prop, das es komplett ersetzt, und useConsentManager(), wenn Sie gar kein Markup wollen.
EINRICHTUNG
Vier Schritte, ein Provider.
- Installierennpm install @katla.app/sdk. Im Headless-Modus werden etwa 4 KB übertragen.
- App umschließenLegen Sie KatlaProvider mit Ihrer Site-ID um Ihren Baum, und ergänzen Sie googleConsentMode, wenn Sie GA4 oder Google Ads nutzen.
- Tags absichernLesen Sie useKatlaConsent() und laden Sie Analytics- oder Marketing-Skripte erst, wenn ihre Kategorie erlaubt ist.
- Banner ausliefernSetzen Sie CookieBanner ein und gestalten Sie es mit Ihrem eigenen CSS, oder bauen Sie Ihr eigenes mit useConsentManager().
GEBAUT FÜR REACT
Hooks und Komponenten, und nichts, worum Sie nicht gebeten haben.
useKatlaConsentDie aktuelle Entscheidung pro Kategorie, in Echtzeit aus window.KatlaConsent aktualisiert, mit einem onChange-Abonnement, das seine eigene Abmeldefunktion zurückgibt.
useKatlaCookiesIhr gescanntes Inventar mit Lade- und Fehlerzuständen. Laufende Anfragen werden dedupliziert, sodass zehn gleichzeitig gemountete Komponenten trotzdem nur einen Fetch auslösen.
useConsentManagerDas ganze Banner als State (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection), ohne ein einziges gerendertes Element.
Ungestylte KomponentenCookieBanner und CookieCatalog rendern semantisches HTML mit katla-*-Klassennamen, einem Render-Prop sowie Overrides pro Kategorie und pro Cookie.
Consent Mode v2Ein einziges googleConsentMode-Prop steuert ad_storage, analytics_storage, ad_user_data und ad_personalization. Standardmäßig verweigert, mit der Entscheidung aktualisiert.
Kein Abruf beim Mountenkatla pull schreibt das Inventar und den Guard nach .katla/. Übergeben Sie sie als initialCookies und guardScript, und der Browser fragt überhaupt nichts an.
CORE WEB VITALS
So krümelt der Keks. Ihr SEO bitte nicht.
Das Consent-Skript ist der erste Drittanbieter auf der Seite, deshalb taucht es im Bericht zu den Core Web Vitals auf. Der React-Einstiegspunkt überträgt 4 KB, rendert keine Oberfläche, um die Sie nicht gebeten haben, und reserviert keinen Platz im Seitenfluss. Mit initialCookies aus dem Build stellt er überhaupt keine Anfrage.
So funktioniert der Headless-Modus →4 kBÜbertragenGuard und Consent-API, Brotli
0 msZusätzlicher LCPGegenüber derselben Seite ohne Katla
0Layout-ShiftDas Banner reserviert keinen Platz im Seitenfluss
2RequestEin Skript, am Edge gecacht
Unsere eigenen Messungen vom : so wurden sie erhoben.
Was React-Teams fragen
- Soll ich das in Next.js verwenden?
- Verwenden Sie stattdessen @katla.app/sdk/next. KatlaNextProvider trägt die Client-Boundary, damit der Rest Ihres Baums aus Server Components bestehen bleibt, und getCachedCookies() lädt das Inventar vorab auf dem Server. Hooks und Komponenten sind dieselben.
- Muss ich CookieBanner verwenden?
- Nein. Es nimmt ein Render-Prop, das sein Markup vollständig ersetzt, und useConsentManager() gibt Ihnen denselben State ganz ohne Markup. Der Provider selbst rendert kein Banner.
- Welche React-Versionen?
- 18 und 19, als Peer Dependency. Durchgehend Hooks und Funktionskomponenten, daher funktioniert es mit Vite, Create React App oder jedem anderen clientseitigen React-Setup.
- Kann ich die Anfrage beim Laden der Seite vermeiden?
- Ja. katla pull schreibt Cookie-Daten, Richtlinien und guard.js zur Build-Zeit nach .katla/. Übergeben Sie sie dem Provider als initialCookies und guardScript, und beim Laden der Seite wird nichts abgerufen.
Umschließen Sie Ihre App einmal, und die Cookies warten, bis sie an der Reihe sind.
Der kostenlose Tarif scannt Ihre React-Website und erstellt eine Cookie-Richtlinie, ohne Karte.