KATLA FÖR REACT
Cookiesamtycke för React som lever i ditt komponentträd.
En provider, en handfull typade hooks och två ostylade komponenter. Beslutet är tillstånd som dina komponenter läser och renderar om efter, cookiespärren injiceras åt dig, och bannern kan du ge ny stil eller byta ut helt.
@katla.app/sdk/reactReact 18 och 19Vite, CRA, valfri 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>
)
}Providern injicerar cookiespärren och samtyckesbryggan självHela guiden →
DÄRFÖR HAR REACT-WEBBPLATSER SVÅRT MED SAMTYCKE
Samtyckestillstånd och React-tillstånd är samma problem, löst två gånger.
PROBLEMETBannern är ett tredjepartsskript som ändrar DOM:en utanför React, och en omrendering eller ett routebyte återställer allt som det var.
MED KATLAI stället en provider och typade hooks. Samtycket lever i context, och komponenterna som läser det renderar om som allt annat i ditt träd.
PROBLEMETTaggar laddas från index.html innan React har monterats, så beslutet kommer långt efter att cookies redan har satts.
MED KATLAKatlaProvider injicerar cookiespärren när den monteras. En cookie vars kategori inte har tillåtits nekas vid document.cookie, oavsett vilken tagg som försökte sätta den.
PROBLEMETEn hostad banner struntar i ditt designsystem, och att ge den ny stil är en kamp mot någon annans stilmall.
MED KATLACookieBanner levereras utan CSS: semantisk markup med stabila katla-*-klassnamn, en render prop som ersätter den helt, och useConsentManager() om du inte vill ha någon markup alls.
INSTALLATION
Fyra steg, en provider.
- Installeranpm install @katla.app/sdk. Cirka 4 kB överförs i headless-läge.
- Omslut din appLägg KatlaProvider runt ditt träd med ditt webbplats-ID, och lägg till googleConsentMode om du kör GA4 eller Google Ads.
- Villkora dina taggarLäs useKatlaConsent() och ladda analys- eller marknadsföringsskript först när deras kategori är tillåten.
- Lansera en bannerSläpp in CookieBanner och styla den med din egen CSS, eller bygg en egen med useConsentManager().
BYGGT FÖR REACT
Hooks och komponenter, och inget du inte bett om.
useKatlaConsentDet aktuella beslutet per kategori, uppdaterat i realtid från window.KatlaConsent, med en onChange-prenumeration som själv returnerar funktionen för att avsluta den.
useKatlaCookiesDin skannade cookieförteckning med laddnings- och feltillstånd. Pågående förfrågningar dedupliceras, så tio komponenter som monteras samtidigt gör ändå bara en hämtning.
useConsentManagerHela bannern som tillstånd (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) och inte ett enda renderat element.
Ostylade komponenterCookieBanner och CookieCatalog renderar semantisk HTML med katla-*-klassnamn, en render prop och åsidosättningar per kategori och per cookie.
Consent Mode v2En enda googleConsentMode-prop styr ad_storage, analytics_storage, ad_user_data och ad_personalization. Nekade som standard, uppdaterade när beslutet fattas.
Ingen hämtning vid monteringkatla pull skriver förteckningen och spärren till .katla/. Skicka dem som initialCookies och guardScript så begär webbläsaren ingenting alls.
CORE WEB VITALS
Samtycket laddar. Din SEO märker inget.
Samtyckesskriptet är den första tredje parten på sidan, och därför dyker det upp i Core Web Vitals-rapporten. Ingångspunkten för React är 4 kB över nätverket, renderar inget gränssnitt du inte bett om och reserverar ingen plats i flödet. Med initialCookies från bygget gör den dessutom ingen förfrågan alls.
Så fungerar headless-läget →4 kBÖverförtSpärr och samtyckes-API, brotli
0 msTillagd LCPJämfört med samma sida utan den
0LayoutförskjutningBannern reserverar inget utrymme i flödet
2AnropEtt skript, cachat vid kanten
Våra egna mätningar, gjorda : så gjordes de.
Frågor som React-team ställer
- Ska jag använda det här i Next.js?
- Använd @katla.app/sdk/next i stället. KatlaNextProvider bär klientgränsen så att resten av ditt träd förblir Server Components, och getCachedCookies() hämtar förteckningen i förväg på servern. Hooks och komponenter är desamma.
- Måste jag använda CookieBanner?
- Nej. Den tar en render prop som ersätter hela dess markup, och useConsentManager() ger dig samma tillstånd helt utan markup. Providern renderar ingen banner på egen hand.
- Vilka versioner av React?
- 18 och 19, som peer dependency. Hooks och funktionskomponenter rakt igenom, så det fungerar med Vite, Create React App eller vilken annan React-uppsättning på klientsidan som helst.
- Kan jag slippa förfrågan när sidan laddas?
- Ja. katla pull skriver cookiedatan, policyerna och guard.js till .katla/ vid byggtid. Skicka dem till providern som initialCookies och guardScript så hämtas ingenting när sidan laddas.
Omslut appen en gång, så får cookies vänta på sin tur.
Gratisplanen skannar din React-webbplats och genererar en cookiepolicy, utan kort.