KATLA VOOR REACT
Cookietoestemming voor React die in je componentenboom leeft.
Een provider, een handvol getypeerde hooks en twee componenten zonder styling. De beslissing is state die je componenten lezen en waarop ze opnieuw renderen, de cookieblokker wordt voor je geïnjecteerd, en de banner kun je restylen of in zijn geheel vervangen.
@katla.app/sdk/reactReact 18 en 19Vite, CRA, elke 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>
)
}De provider injecteert zelf de cookieblokker en de consent-bridgeVolledige gids →
WAAROM TOESTEMMING OP REACT LASTIG IS
Toestemmingsstatus en React-state zijn hetzelfde probleem, twee keer opgelost.
HET PROBLEEMDe banner is een script van een derde partij dat de DOM van buiten React aanpast, en een re-render of routewissel zet alles weer terug zoals het was.
MET KATLAIn plaats daarvan een provider en getypeerde hooks. Toestemming leeft in context, en de componenten die haar lezen renderen opnieuw, net als al het andere in je boom.
HET PROBLEEMTags worden vanuit index.html geladen voordat React is gemount, dus de beslissing komt pas lang nadat de cookies er al waren.
MET KATLAKatlaProvider injecteert de cookieblokker zodra hij mount. Een cookie waarvan de categorie niet is toegestaan, wordt geweigerd bij document.cookie, welke tag hem ook probeerde te zetten.
HET PROBLEEMEen gehoste banner negeert je design system, en hem restylen is een gevecht met de stylesheet van iemand anders.
MET KATLACookieBanner levert geen CSS: semantische markup met stabiele katla-*-classnames, een render prop die hem volledig vervangt, en useConsentManager() als je helemaal geen markup wilt.
INSTALLATIE
Vier stappen, één provider.
- Installerennpm install @katla.app/sdk. In headless modus ongeveer 4 KB over het netwerk.
- Provider om je appZet KatlaProvider met je Site-ID om je componentenboom, en voeg googleConsentMode toe als je GA4 of Google Ads gebruikt.
- Tags afschermenLees useKatlaConsent() en laad analytics- of marketingscripts pas als hun categorie is toegestaan.
- Banner live zettenPlaats CookieBanner en style hem met je eigen CSS, of bouw je eigen banner met useConsentManager().
GEBOUWD VOOR REACT
Hooks en componenten, en niets waar je niet om vroeg.
useKatlaConsentDe huidige beslissing per categorie, realtime bijgewerkt vanuit window.KatlaConsent, met een onChange-subscription die zelf haar unsubscribe teruggeeft.
useKatlaCookiesJe gescande inventaris met laad- en foutstatus. Lopende verzoeken worden gededupliceerd, dus tien componenten die tegelijk mounten doen nog steeds één fetch.
useConsentManagerDe hele banner als state (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) zonder één gerenderd element.
Componenten zonder stylingCookieBanner en CookieCatalog renderen semantische HTML met katla-*-classnames, een render prop en overrides per categorie en per cookie.
Consent Mode v2Eén googleConsentMode-prop stuurt ad_storage, analytics_storage, ad_user_data en ad_personalization aan. Standaard geweigerd, bijgewerkt zodra de keuze valt.
Niets ophalen bij het mountenkatla pull schrijft de inventaris en de cookieblokker naar .katla/. Geef ze door als initialCookies en guardScript en de browser vraagt helemaal niets op.
CORE WEB VITALS
Zo brokkelt het koekje af. Jouw SEO niet.
Het consentscript is de eerste derde partij op de pagina, en daarom duikt het op in het Core Web Vitals-rapport. Het React-entrypoint is 4 KB over het netwerk, rendert geen interface waar je niet om hebt gevraagd en reserveert geen ruimte in de flow, en met initialCookies uit de build doet het helemaal geen verzoek.
Zo werkt de headless-modus →4 kBOver het netwerkCookieblokker en toestemmings-API, brotli
0 msExtra LCPTegenover dezelfde pagina zonder Katla
0LayoutverschuivingDe banner reserveert geen ruimte in de paginaflow
2RequestEén script, gecachet aan de edge
Onze eigen metingen, gedaan op (zo hebben we gemeten).
Vragen die React-teams stellen
- Gebruik ik dit ook in Next.js?
- Gebruik daar @katla.app/sdk/next. KatlaNextProvider draagt de clientgrens, zodat de rest van je boom uit Server Components blijft bestaan, en getCachedCookies() haalt de inventaris vooraf op de server op. De hooks en componenten zijn precies dezelfde.
- Moet ik CookieBanner gebruiken?
- Nee. Hij accepteert een render prop die zijn markup volledig vervangt, en useConsentManager() geeft je dezelfde state zonder enige markup. De provider rendert uit zichzelf geen banner.
- Welke versies van React?
- 18 en 19, als peer dependency. Overal hooks en functiecomponenten, dus het werkt met Vite, Create React App of elke andere client-side React-setup.
- Kan ik het verzoek bij het laden van de pagina vermijden?
- Ja. katla pull schrijft de cookiegegevens, het beleid en guard.js tijdens de build naar .katla/. Geef ze aan de provider door als initialCookies en guardScript en er wordt bij het laden van de pagina niets opgehaald.
Omhul je app één keer, en de cookies wachten netjes hun beurt af.
Het gratis abonnement scant je React-site en genereert een cookiebeleid, zonder creditcard.