next-coockie-banner-mayo
v1.0.3
Published
Componente de consentimiento de cookies para Next.js 14 con TypeScript. Gestiona cookies esenciales y funcionales con una interfaz intuitiva y totalmente personalizable.
Maintainers
devmayoReadme
🍪 Componente de Consentimiento de Cookies para Next.js 14
Un componente moderno y profesional de consentimiento de cookies para Next.js 14 con TypeScript, inspirado en Cookiebot. Gestiona cookies esenciales y funcionales con una interfaz intuitiva y totalmente personalizable.
✨ Características
- ✅ Next.js 14 con App Router
- ✅ TypeScript completamente tipado
- ✅ Diseño moderno con animaciones suaves
- ✅ Responsive para todos los dispositivos
- ✅ Dark mode automático
- ✅ Persistencia con localStorage
- ✅ Callbacks personalizables
- ✅ Accesibilidad completa (ARIA labels)
- ✅ Solo cookies esenciales y funcionales
- ✅ Botón flotante para reabrir configuración
📦 Instalación
npm install next-coockie-banner-mayo🚀 Uso Básico
1. Envolver tu aplicación con el Provider
En tu app/layout.tsx:
import { CookieConsentProvider } from "next-coockie-banner-mayo";
import { CookieBanner } from "next-coockie-banner-mayo";
import { CookieSettingsButton } from "next-coockie-banner-mayo";
import "next-coockie-banner-mayo/styles";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es">
<body>
<CookieConsentProvider>
{children}
<CookieBanner />
<CookieSettingsButton position="left" />
</CookieConsentProvider>
</body>
</html>
);
}2. Usar el hook en tus componentes
"use client";
import { useCookieConsent } from "next-coockie-banner-mayo";
export function Analytics() {
const { hasConsent } = useCookieConsent();
// Solo cargar analytics si hay consentimiento funcional
if (hasConsent("functional")) {
// Inicializar Google Analytics, etc.
}
return null;
}⚙️ Configuración Avanzada
Personalizar textos
<CookieBanner
texts={{
title: "Personaliza tus preferencias de cookies",
description: "Tu texto personalizado aquí...",
acceptButton: "Aceptar todo",
denyButton: "Rechazar",
settingsButton: "Configurar",
functionalLabel: "Cookies de rendimiento",
functionalDescription: "Ayudan a mejorar el rendimiento del sitio.",
}}
/>Callbacks personalizados
<CookieConsentProvider
config={{
onAccept: (consent) => {
console.log("Usuario aceptó cookies:", consent);
// Inicializar servicios que requieren consentimiento
},
onDeny: (consent) => {
console.log("Usuario rechazó cookies:", consent);
},
onUpdate: (consent) => {
console.log("Consentimiento actualizado:", consent);
},
}}
>
{children}
</CookieConsentProvider>Configuración completa
<CookieConsentProvider
config={{
storageKey: "mi-app-cookies",
expirationDays: 365,
buttonPosition: "right",
onAccept: (consent) => {
// Tu lógica aquí
},
}}
>
{children}
</CookieConsentProvider>🎨 Personalización de Estilos
El componente usa variables CSS que puedes sobrescribir:
:root {
--cookie-primary: #4f46e5;
--cookie-primary-hover: #4338ca;
--cookie-bg: #ffffff;
--cookie-text: #1f2937;
--cookie-radius: 16px;
/* ... más variables en cookies.css */
}🔧 API
CookieConsentProvider
Provider principal que debe envolver tu aplicación.
Props:
| Prop | Tipo | Por defecto | Descripción | | -------- | ------------------- | ----------- | ---------------------------- | | children | ReactNode | required | Componentes hijos | | config | CookieConsentConfig | {} | Configuración del componente |
CookieBanner
Banner que se muestra en la primera visita.
Props:
| Prop | Tipo | Por defecto | Descripción | | ----- | ----------- | ----------- | ---------------------- | | texts | CookieTexts | {} | Textos personalizables |
CookieSettingsButton
Botón flotante para reabrir la configuración.
Props:
| Prop | Tipo | Por defecto | Descripción | | -------- | ---------------- | -------------------------- | ------------------ | | position | 'left' / 'right' | 'left' | Posición del botón | | tooltip | string | 'Configuración de cookies' | Texto del tooltip |
useCookieConsent
Hook para acceder al estado y funciones del consentimiento.
Retorna:
{
consent: CookieConsent | null;
isVisible: boolean;
showBanner: () => void;
hideBanner: () => void;
acceptAll: () => void;
denyAll: () => void;
updateConsent: (consent: Partial<CookieConsent>) => void;
hasConsent: (category: CookieCategory) => boolean;
}📝 Tipos
CookieConsent
interface CookieConsent {
essential: boolean; // Siempre true
functional: boolean; // True si se aceptan
timestamp: number; // Momento del consentimiento
hasInteracted: boolean; // Si el usuario interactuó con el banner
}CookieCategory
enum CookieCategory {
ESSENTIAL = "essential",
FUNCTIONAL = "functional",
}🎯 Ejemplos de Uso
Cargar Google Analytics condicionalmente
"use client";
import { useEffect } from "react";
import { useCookieConsent } from "next-coockie-banner-mayo";
export function GoogleAnalytics() {
const { hasConsent } = useCookieConsent();
useEffect(() => {
if (hasConsent("functional")) {
// Cargar Google Analytics
window.gtag("config", "GA_MEASUREMENT_ID");
}
}, [hasConsent]);
return null;
}Guardar preferencias de usuario
"use client";
import { useCookieConsent, cookieManager } from "next-coockie-banner-mayo";
export function UserPreferences() {
const { hasConsent } = useCookieConsent();
const saveTheme = (theme: string) => {
if (hasConsent("functional")) {
cookieManager.set("user-theme", theme);
}
};
return <button onClick={() => saveTheme("dark")}>Activar modo oscuro</button>;
}Verificar consentimiento antes de cargar scripts
"use client";
import Script from "next/script";
import { useCookieConsent } from "next-coockie-banner-mayo";
export function ThirdPartyScripts() {
const { hasConsent } = useCookieConsent();
if (!hasConsent("functional")) {
return null;
}
return (
<>
<Script src="https://example.com/analytics.js" />
<Script src="https://example.com/chat.js" />
</>
);
}🔒 Privacidad y GDPR
Este componente está diseñado para ayudarte a cumplir con GDPR y otras normativas de privacidad:
- ✅ Las cookies esenciales están siempre activas (necesarias para el funcionamiento)
- ✅ Las cookies funcionales requieren consentimiento explícito
- ✅ El consentimiento se almacena localmente
- ✅ Los usuarios pueden cambiar sus preferencias en cualquier momento
- ✅ El consentimiento expira después del tiempo configurado (por defecto 365 días)
🐛 Solución de Problemas
El banner no aparece
- Verifica que hayas importado el CSS:
import '@/components/cookie-consent/styles/cookies.css' - Asegúrate de que el
CookieConsentProviderenvuelva tu aplicación - Revisa la consola del navegador por errores
El estado no persiste
- Verifica que localStorage esté disponible en el navegador
- Comprueba que no estés en modo incógnito
- Revisa la configuración de
storageKeysi la personalizaste
Problemas de TypeScript
- Asegúrate de tener TypeScript 5.0 o superior
- Verifica que
tsconfig.jsonincluya la carpeta del componente
📄 Licencia
MIT
🤝 Contribuciones
Este es un componente standalone. Siéntete libre de modificarlo según tus necesidades.
📞 Soporte
Para problemas o preguntas, revisa la documentación o examina los archivos de ejemplo en la carpeta example/.