KATLA POUR REACT
Un consentement aux cookies React qui vit dans votre arbre de composants.
Un provider, quelques hooks typés et deux composants sans style. La décision est un état que vos composants lisent et qui les fait re-rendre, le bloqueur de cookies est injecté pour vous, et la bannière est à vous : restylez-la ou remplacez-la entièrement.
@katla.app/sdk/reactReact 18 et 19Vite, CRA, tout 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>
)
}Le provider injecte lui-même le bloqueur de cookies et le pont de consentementGuide complet →
POURQUOI LE CONSENTEMENT COINCE SUR LES SITES REACT
L’état du consentement et l’état React sont le même problème, résolu deux fois.
LE PROBLÈMELa bannière est un script tiers qui modifie le DOM depuis l’extérieur de React, et un re-rendu ou un changement de route la remet comme avant.
AVEC KATLAÀ la place, un provider et des hooks typés. Le consentement vit dans le contexte, et les composants qui le lisent se re-rendent comme tout le reste de votre arbre.
LE PROBLÈMELes balises sont chargées depuis index.html avant que React soit monté : la décision arrive bien après les cookies.
AVEC KATLAKatlaProvider injecte le bloqueur de cookies au montage. Un cookie dont la catégorie n’a pas été autorisée est refusé au niveau de document.cookie, quelle que soit la balise qui a tenté de le déposer.
LE PROBLÈMEUne bannière hébergée ignore votre design system, et la restyler revient à se battre contre la feuille de style de quelqu’un d’autre.
AVEC KATLACookieBanner ne livre aucun CSS : du balisage sémantique avec des noms de classes katla-* stables, une render prop qui le remplace entièrement, et useConsentManager() si vous ne voulez aucun balisage.
INSTALLATION
Quatre étapes, un provider.
- Installernpm install @katla.app/sdk. Environ 4 Ko transférés en mode headless.
- Envelopper votre appPlacez KatlaProvider autour de votre arbre avec votre Site ID, et ajoutez googleConsentMode si vous utilisez GA4 ou Google Ads.
- Conditionner vos balisesLisez useKatlaConsent() et ne chargez les scripts d’analyse ou marketing qu’une fois leur catégorie autorisée.
- Livrer une bannièreIntégrez CookieBanner et stylez-le avec votre propre CSS, ou construisez votre bannière avec useConsentManager().
CONÇU POUR REACT
Des hooks et des composants, et rien que vous n’ayez pas demandé.
useKatlaConsentLa décision actuelle par catégorie, mise à jour en temps réel depuis window.KatlaConsent, avec un abonnement onChange qui renvoie sa propre fonction de désabonnement.
useKatlaCookiesVotre inventaire analysé, avec états de chargement et d’erreur. Les requêtes en cours sont dédupliquées : dix composants montés en même temps ne font qu’un seul fetch.
useConsentManagerToute la bannière sous forme d’état (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection), sans un seul élément rendu.
Composants sans styleCookieBanner et CookieCatalog produisent du HTML sémantique avec des noms de classes katla-*, une render prop et des surcharges par catégorie et par cookie.
Consent Mode v2Une seule prop googleConsentMode pilote ad_storage, analytics_storage, ad_user_data et ad_personalization. Refusés par défaut, mis à jour dès la décision.
Rien de récupéré au montagekatla pull écrit l’inventaire et le bloqueur dans .katla/. Passez-les en initialCookies et guardScript, et le navigateur ne demande plus rien du tout.
CORE WEB VITALS
Les cookies s’émiettent. Votre SEO, non.
Le script de consentement est le premier tiers de la page, c’est pourquoi il apparaît dans le rapport Core Web Vitals. Le point d’entrée React pèse 4 Ko transférés, n’affiche aucune interface que vous n’avez pas demandée et ne réserve aucun espace dans le flux ; avec initialCookies issu du build, il n’envoie même aucune requête.
Comment fonctionne le mode headless →4 kBTransféréBloqueur et API de consentement, brotli
0 msLCP ajoutéComparé à la même page sans lui
0Décalage de mise en pageLa bannière ne réserve aucun espace dans le flux
2RequêteUn seul script, mis en cache en périphérie
Nos propres mesures, réalisées le : voici comment.
Les questions des équipes React
- Faut-il l’utiliser dans Next.js ?
- Utilisez plutôt @katla.app/sdk/next. KatlaNextProvider porte la frontière client pour que le reste de votre arbre reste en Server Components, et getCachedCookies() précharge l’inventaire côté serveur. Les hooks et les composants sont les mêmes.
- Suis-je obligé d’utiliser CookieBanner ?
- Non. Il accepte une render prop qui remplace entièrement son balisage, et useConsentManager() vous donne le même état sans aucun balisage. Le provider n’affiche aucune bannière de lui-même.
- Quelles versions de React ?
- 18 et 19, en peer dependency. Des hooks et des composants fonctions partout : ça fonctionne avec Vite, Create React App ou toute autre configuration React côté client.
- Puis-je éviter la requête au chargement de la page ?
- Oui. katla pull écrit les données des cookies, les politiques et guard.js dans .katla/ au moment du build. Passez-les au provider en initialCookies et guardScript, et rien n’est récupéré au chargement de la page.
Enveloppez votre app une fois, et les cookies attendent leur tour.
L’offre gratuite analyse votre site React et génère une politique de cookies, sans carte bancaire.