KATLA TIL REACT
Cookiesamtykke til React, der lever i dit komponenttræ.
En provider, en håndfuld typede hooks og to ustylede komponenter. Valget er state, som dine komponenter læser og renderer igen på, cookiespærren bliver indsat for dig, og banneret kan du restyle eller udskifte helt.
@katla.app/sdk/reactReact 18 og 19Vite, CRA, enhver 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>
)
}Provideren indsætter selv cookiespærren og samtykkebroenHele guiden →
DERFOR KÆMPER REACT-WEBSITES MED SAMTYKKE
Samtykketilstand og React-state er det samme problem, løst to gange.
PROBLEMETBanneret er et tredjepartsscript, der ændrer DOM’en uden om React, og en re-render eller et ruteskift sætter den tilbage, som den var.
MED KATLAI stedet en provider og typede hooks. Samtykket lever i context, og de komponenter, der læser det, renderer igen ligesom alt andet i dit træ.
PROBLEMETTags indlæses fra index.html, før React er mountet, så valget ankommer længe efter cookiesene.
MED KATLAKatlaProvider indsætter cookiespærren, når den mountes. En cookie, hvis kategori ikke er tilladt, bliver afvist ved document.cookie, uanset hvilket tag der forsøgte at sætte den.
PROBLEMETEt hostet banner ignorerer dit designsystem, og at restyle det er en kamp mod en andens stylesheet.
MED KATLACookieBanner leveres uden CSS: semantisk markup med stabile katla-*-klassenavne, en render prop, der erstatter den helt, og useConsentManager(), hvis du slet ikke vil have markup.
OPSÆTNING
Fire trin, én provider.
- Installernpm install @katla.app/sdk. Cirka 4 KB overført i headless-tilstand.
- Pak din app indSæt KatlaProvider om dit træ med dit site-ID, og tilføj googleConsentMode, hvis du bruger GA4 eller Google Ads.
- Sæt tags bag samtykkeLæs useKatlaConsent(), og indlæs først analytics- eller marketingscripts, når deres kategori er tilladt.
- Tilføj et bannerSæt CookieBanner ind, og style den med din egen CSS, eller byg dit eget med useConsentManager().
BYGGET TIL REACT
Hooks og komponenter, og intet, du ikke har bedt om.
useKatlaConsentDet aktuelle valg pr. kategori, opdateret i realtid fra window.KatlaConsent, med et onChange-abonnement, der selv returnerer sin afmeldingsfunktion.
useKatlaCookiesDin scannede cookieoversigt med loading- og fejltilstande. Igangværende forespørgsler deduplikeres, så ti komponenter, der mountes på én gang, stadig kun henter én gang.
useConsentManagerHele banneret som state (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) og ikke ét eneste element renderet.
Ustylede komponenterCookieBanner og CookieCatalog renderer semantisk HTML med katla-*-klassenavne, en render prop og overrides pr. kategori og pr. cookie.
Consent Mode v2Én googleConsentMode-prop styrer ad_storage, analytics_storage, ad_user_data og ad_personalization. Afvist som standard og opdateret, når den besøgende vælger.
Intet hentes ved mountkatla pull skriver cookieoversigten og spærren ind i .katla/. Giv dem videre som initialCookies og guardScript, så sender browseren slet ingen forespørgsler.
CORE WEB VITALS
Samtykket indlæses. Din SEO mærker ingenting.
Samtykkescriptet er den første tredjepart på siden, og derfor dukker det op i Core Web Vitals-rapporten. React-indgangen fylder 4 KB over nettet, renderer ingen brugerflade, du ikke har bedt om, og reserverer ingen plads i sidens flow. Med initialCookies fra buildet sender den slet ingen forespørgsel.
Sådan virker headless-tilstand →4 kBOver nettetCookiespærre og samtykke-API, brotli
0 msEkstra LCPMod den samme side uden
0LayoutskiftBanneret reserverer ingen plads i flowet
2ForespørgselÉt script, cachet på edge
Vores egne målinger, foretaget den : sådan blev de foretaget.
Spørgsmål, som React-teams stiller
- Skal jeg bruge det her i Next.js?
- Brug @katla.app/sdk/next i stedet. KatlaNextProvider bærer klientgrænsen, så resten af dit træ forbliver Server Components, og getCachedCookies() henter cookieoversigten på forhånd på serveren. Hooks og komponenter er de samme.
- Skal jeg bruge CookieBanner?
- Nej. Den tager en render prop, der erstatter dens markup helt, og useConsentManager() giver dig samme state helt uden markup. Provideren renderer ikke selv noget banner.
- Hvilke versioner af React?
- 18 og 19, som peer dependency. Hooks og funktionskomponenter hele vejen igennem, så det virker med Vite, Create React App eller ethvert andet React-setup på klientsiden.
- Kan jeg undgå forespørgslen, når siden indlæses?
- Ja. katla pull skriver cookiedata, politikkerne og guard.js ind i .katla/, når du bygger. Giv dem til provideren som initialCookies og guardScript, så hentes intet, når siden indlæses.
Pak din app ind én gang, så venter cookiesene på deres tur.
Den gratis plan scanner dit React-website og genererer en cookiepolitik uden betalingskort.