KATLA FOR REACT
Cookiesamtykke for React som lever i komponenttreet ditt.
En provider, en håndfull typede hooks og to ustylede komponenter. Valget er state som komponentene dine leser og rendres på nytt av, cookie-vakten settes inn for deg, og banneret kan du style om eller bytte ut helt.
@katla.app/sdk/reactReact 18 og 19Vite, CRA, alle bundlere
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 setter inn cookie-vakten og samtykkebroen selvHele guiden →
HVORFOR REACT-NETTSTEDER SLITER MED SAMTYKKE
Samtykketilstand og React-state er det samme problemet, løst to ganger.
PROBLEMETBanneret er et tredjepartsskript som endrer DOM-en utenfra React, og en ny rendring eller et rutebytte setter den tilbake slik den var.
MED KATLAHer får du i stedet en provider og typede hooks. Samtykket lever i context, og komponentene som leser det, rendres på nytt som alt annet i treet ditt.
PROBLEMETTagger lastes fra index.html før React er montert, så valget kommer lenge etter at informasjonskapslene (cookies) er satt.
MED KATLAKatlaProvider setter inn cookie-vakten når den monteres. En cookie i en kategori som ikke er tillatt, blir avvist ved document.cookie, uansett hvilken tagg som prøvde å sette den.
PROBLEMETEt hostet banner ignorerer designsystemet ditt, og å style det om er en kamp mot noen andres stilark.
MED KATLACookieBanner leveres uten CSS: semantisk markup med stabile katla-*-klassenavn, en render prop som erstatter det helt, og useConsentManager() hvis du ikke vil ha markup i det hele tatt.
OPPSETT
Fire steg, én provider.
- Installernpm install @katla.app/sdk. Omtrent 4 KB overført i headless-modus.
- Pakk inn appenLegg KatlaProvider rundt treet ditt med din Site ID, og legg til googleConsentMode hvis du bruker GA4 eller Google Ads.
- Legg taggene bak samtykkeLes useKatlaConsent(), og last analyse- eller markedsføringsskript først når kategorien deres er tillatt.
- Lanser et bannerSett inn CookieBanner og style det med din egen CSS, eller bygg ditt eget med useConsentManager().
BYGGET FOR REACT
Hooks og komponenter, og ingenting du ikke ba om.
useKatlaConsentGjeldende valg per kategori, oppdatert i sanntid fra window.KatlaConsent, med et onChange-abonnement som returnerer sin egen avmeldingsfunksjon.
useKatlaCookiesDen skannede cookie-oversikten din, med laste- og feiltilstand. Pågående forespørsler dedupliseres, så ti komponenter som monteres samtidig, gjør likevel bare én henting.
useConsentManagerHele banneret som state: ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection, og ikke ett eneste element rendret.
Ustylede komponenterCookieBanner og CookieCatalog rendrer semantisk HTML med katla-*-klassenavn, en render prop og overstyringer per kategori og per cookie.
Consent Mode v2Én googleConsentMode-prop styrer ad_storage, analytics_storage, ad_user_data og ad_personalization. Avslått som standard, oppdatert når valget er tatt.
Ingen henting ved monteringkatla pull skriver oversikten og vakten til .katla/. Send dem inn som initialCookies og guardScript, så ber nettleseren ikke om noe som helst.
CORE WEB VITALS
Samtykket lastes inn. SEO-en din merker ingenting.
Samtykkeskriptet er den første tredjeparten på siden, og derfor dukker det opp i Core Web Vitals-rapporten. React-inngangen er 4 KB overført, rendrer ikke noe grensesnitt du ikke har bedt om, og reserverer ingen plass i flyten. Med initialCookies fra bygget gjør den ingen forespørsel i det hele tatt.
Slik fungerer headless-modus →4 kBOver nettetCookie-vakt og samtykke-API, brotli
0 msEkstra LCPMot den samme siden uten Katla
0LayoutforskyvningBanneret reserverer ingen plass i flyten
2ForespørselEtt skript, bufret i edge-nettverket
Våre egne målinger, gjort (slik ble de gjort).
Spørsmål React-team stiller
- Bør jeg bruke dette i Next.js?
- Bruk @katla.app/sdk/next i stedet. KatlaNextProvider bærer klientgrensen, så resten av treet ditt forblir Server Components, og getCachedCookies() henter oversikten på forhånd på serveren. Hooks og komponenter er de samme.
- Må jeg bruke CookieBanner?
- Nei. Den tar en render prop som erstatter markupen helt, og useConsentManager() gir deg den samme tilstanden uten markup i det hele tatt. Provideren rendrer ikke noe banner på egen hånd.
- Hvilke React-versjoner?
- 18 og 19, som peer dependency. Hooks og funksjonskomponenter hele veien, så det fungerer med Vite, Create React App eller et hvilket som helst annet React-oppsett på klientsiden.
- Kan jeg unngå forespørselen når siden lastes?
- Ja. katla pull skriver cookie-dataene, erklæringene og guard.js til .katla/ ved byggetid. Send dem til provideren som initialCookies og guardScript, så hentes ingenting når siden lastes.
Pakk inn appen én gang, så venter cookiene på tur.
Gratisplanen skanner ditt React-nettsted og genererer en cookie-erklæring, uten kort.