KATLA PARA REACT
Consentimiento de cookies para React que vive en tu árbol de componentes.
Un provider, unos cuantos hooks tipados y dos componentes sin estilos. La decisión es estado que tus componentes leen y con el que se vuelven a renderizar, el bloqueador de cookies se inyecta por ti, y el banner puedes reestilizarlo o sustituirlo por completo.
@katla.app/sdk/reactReact 18 y 19Vite, CRA, cualquier 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>
)
}El propio provider inyecta el bloqueador de cookies y el puente de consentimientoGuía completa →
POR QUÉ A LOS SITIOS DE REACT LES CUESTA EL CONSENTIMIENTO
El estado del consentimiento y el estado de React son el mismo problema, resuelto dos veces.
EL PROBLEMAEl banner es un script de terceros que modifica el DOM desde fuera de React, y un nuevo renderizado o un cambio de ruta lo deja como estaba.
CON KATLAEn su lugar, un provider y hooks tipados. El consentimiento vive en el contexto, y los componentes que lo leen se vuelven a renderizar como cualquier otra cosa de tu árbol.
EL PROBLEMALas etiquetas se cargan desde index.html antes de que React se haya montado, así que la decisión llega mucho después que las cookies.
CON KATLAKatlaProvider inyecta el bloqueador de cookies al montarse. Una cookie cuya categoría no se ha concedido se rechaza en document.cookie, sea cual sea la etiqueta que intentó escribirla.
EL PROBLEMAUn banner alojado ignora tu sistema de diseño, y cambiarle el estilo es pelearse con la hoja de estilos de otro.
CON KATLACookieBanner no incluye CSS: marcado semántico con nombres de clase katla-* estables, un render prop que lo sustituye por completo, y useConsentManager() si no quieres ningún marcado.
CONFIGURACIÓN
Cuatro pasos, un provider.
- Instalarnpm install @katla.app/sdk. Unos 4 KB transferidos en modo headless.
- Envolver tu appPon KatlaProvider alrededor de tu árbol con el ID de tu sitio, y añade googleConsentMode si usas GA4 o Google Ads.
- Condicionar las etiquetasLee useKatlaConsent() y carga los scripts de analítica o de marketing solo cuando su categoría esté concedida.
- Lanzar un bannerAñade CookieBanner y dale estilo con tu propio CSS, o construye el tuyo con useConsentManager().
HECHO PARA REACT
Hooks y componentes, y nada que no hayas pedido.
useKatlaConsentLa decisión actual por categoría, actualizada en tiempo real desde window.KatlaConsent, con una suscripción onChange que devuelve su propia función para cancelarla.
useKatlaCookiesTu inventario escaneado, con estados de carga y de error. Las peticiones en curso se deduplican, así que diez componentes que se montan a la vez siguen haciendo una sola petición.
useConsentManagerTodo el banner como estado (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) sin renderizar ni un solo elemento.
Componentes sin estilosCookieBanner y CookieCatalog renderizan HTML semántico con nombres de clase katla-*, un render prop y personalizaciones por categoría y por cookie.
Consent Mode v2Una sola prop googleConsentMode controla ad_storage, analytics_storage, ad_user_data y ad_personalization. Denegadas por defecto, actualizadas con la decisión.
Nada de peticiones al montarkatla pull escribe el inventario y el bloqueador en .katla/. Pásalos como initialCookies y guardScript y el navegador no pide absolutamente nada.
CORE WEB VITALS
Las galletas se desmoronan. Tu SEO, no.
El script de consentimiento es el primer script de terceros de la página, y por eso aparece en el informe de Core Web Vitals. El punto de entrada de React son 4 KB transferidos, no renderiza ninguna interfaz que no hayas pedido ni reserva espacio en el flujo, y con initialCookies desde el build no hace ninguna petición.
Cómo funciona el modo headless →4 kBTransferidoBloqueador y API de consentimiento, brotli
0 msLCP añadidoFrente a la misma página sin él
0Desplazamiento de diseñoEl banner no reserva espacio en el flujo
2PeticiónUn script, en caché en el edge
Mediciones propias, realizadas el : así se hicieron.
Lo que preguntan los equipos de React
- ¿Debería usarlo en Next.js?
- Usa @katla.app/sdk/next en su lugar. KatlaNextProvider lleva el límite de cliente para que el resto de tu árbol siga siendo Server Components, y getCachedCookies() hace el prefetch del inventario en el servidor. Los hooks y los componentes son los mismos.
- ¿Tengo que usar CookieBanner?
- No. Acepta un render prop que sustituye todo su marcado, y useConsentManager() te da el mismo estado sin ningún marcado. El provider no renderiza ningún banner por sí solo.
- ¿Qué versiones de React?
- 18 y 19, como peer dependency. Hooks y componentes de función en todo el código, así que funciona con Vite, Create React App o cualquier otra configuración de React en el cliente.
- ¿Puedo evitar la petición al cargar la página?
- Sí. katla pull escribe los datos de cookies, las políticas y guard.js en .katla/ durante el build. Pásalos al provider como initialCookies y guardScript y no se descarga nada al cargar la página.
Envuelve tu app una vez, y las cookies esperan su turno.
El plan gratuito escanea tu sitio de React y genera una política de cookies, sin tarjeta.