KATLA PER REACT
Il consenso ai cookie per React che vive nel tuo albero dei componenti.
Un provider, una manciata di hook tipizzati e due componenti senza stili. La decisione è uno stato che i tuoi componenti leggono e su cui si ri-renderizzano, il blocco dei cookie viene inserito per te, e il banner puoi ridisegnarlo o sostituirlo del tutto.
@katla.app/sdk/reactReact 18 e 19Vite, CRA, qualsiasi 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>
)
}Il provider inserisce da solo il blocco dei cookie e il bridge del consensoGuida completa →
PERCHÉ I SITI REACT FATICANO CON IL CONSENSO
Stato del consenso e stato di React sono lo stesso problema, risolto due volte.
IL PROBLEMAIl banner è uno script di terze parti che modifica il DOM da fuori React, e un re-render o un cambio di route lo riporta com’era.
CON KATLAAl suo posto, un provider e hook tipizzati. Il consenso vive nel context, e i componenti che lo leggono si ri-renderizzano come qualsiasi altra cosa nel tuo albero.
IL PROBLEMAI tag vengono caricati da index.html prima che React sia montato, quindi la decisione arriva molto dopo i cookie.
CON KATLAKatlaProvider inserisce il blocco dei cookie al mount. Un cookie la cui categoria non è stata consentita viene rifiutato a livello di document.cookie, qualunque tag abbia provato a impostarlo.
IL PROBLEMAUn banner ospitato ignora il tuo design system, e cambiargli stile significa combattere con il foglio di stile di qualcun altro.
CON KATLACookieBanner non include CSS: markup semantico con nomi di classe katla-* stabili, una render prop che lo sostituisce del tutto, e useConsentManager() se non vuoi alcun markup.
CONFIGURAZIONE
Quattro passaggi, un provider.
- Installanpm install @katla.app/sdk. Circa 4 KB trasferiti in modalità headless.
- Avvolgi la tua appMetti KatlaProvider attorno al tuo albero con il tuo Site ID, e aggiungi googleConsentMode se usi GA4 o Google Ads.
- Subordina i tagLeggi useKatlaConsent() e carica gli script di analytics o marketing solo quando la loro categoria è consentita.
- Pubblica un bannerInserisci CookieBanner e dagli stile con il tuo CSS, oppure costruisci il tuo con useConsentManager().
PENSATO PER REACT
Hook e componenti, e niente che tu non abbia chiesto.
useKatlaConsentLa decisione attuale per categoria, aggiornata in tempo reale da window.KatlaConsent, con una sottoscrizione onChange che restituisce la propria funzione di annullamento.
useKatlaCookiesIl tuo inventario scansionato, con stati di caricamento e di errore. Le richieste in corso vengono deduplicate, così dieci componenti montati insieme fanno comunque un solo fetch.
useConsentManagerL’intero banner come stato (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) e nemmeno un elemento renderizzato.
Componenti senza stiliCookieBanner e CookieCatalog renderizzano HTML semantico con nomi di classe katla-*, una render prop e override per categoria e per singolo cookie.
Consent Mode v2Una sola prop googleConsentMode governa ad_storage, analytics_storage, ad_user_data e ad_personalization. Negati per impostazione predefinita, aggiornati alla decisione.
Nessun fetch al mountkatla pull scrive l’inventario e il blocco dei cookie in .katla/. Passali come initialCookies e guardScript e il browser non richiede proprio nulla.
CORE WEB VITALS
I cookie si sbriciolano. La tua SEO no.
Lo script di consenso è la prima terza parte sulla pagina, ed è per questo che compare nel report Core Web Vitals. Il punto di ingresso React pesa 4 KB trasferiti, non renderizza interfacce che non hai chiesto e non riserva spazio nel flusso della pagina; con initialCookies dalla build, non fa nemmeno una richiesta.
Come funziona la modalità headless →4 kBDati trasferitiBlocco dei cookie e API di consenso, brotli
0 msLCP aggiuntoRispetto alla stessa pagina senza
0Spostamento del layoutIl banner non riserva spazio nel flusso
2RichiestaUn solo script, in cache all’edge
Nostre misurazioni, effettuate il : ecco come le abbiamo fatte.
Le domande dei team React
- Devo usarlo in Next.js?
- Usa invece @katla.app/sdk/next. KatlaNextProvider si fa carico del confine client così il resto del tuo albero resta fatto di Server Component, e getCachedCookies() precarica l’inventario sul server. Hook e componenti sono gli stessi.
- Devo per forza usare CookieBanner?
- No. Accetta una render prop che ne sostituisce completamente il markup, e useConsentManager() ti dà lo stesso stato senza alcun markup. Il provider da solo non renderizza nessun banner.
- Quali versioni di React?
- 18 e 19, come peer dependency. Solo hook e componenti funzione, quindi funziona con Vite, Create React App o qualsiasi altro setup React lato client.
- Posso evitare la richiesta al caricamento della pagina?
- Sì. katla pull scrive i dati dei cookie, le policy e guard.js in .katla/ in fase di build. Passali al provider come initialCookies e guardScript e al caricamento della pagina non viene scaricato nulla.
Avvolgi la tua app una volta, e i cookie aspettano il loro turno.
Il piano gratuito scansiona il tuo sito React e genera un’informativa sui cookie, senza carta di credito.