nextjs-cookie-consent 1.0.1 → 1.0.3

package/dist/src/CookieBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CookieBanner.d.ts","sourceRoot":"","sources":["../../src/CookieBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAgC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAuD1E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CookieBanner.d.ts","sourceRoot":"","sources":["../../src/CookieBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAgC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwD1E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkJ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/src/CookieBanner.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useConsent } from './useConsent';
 const styles = {
     cookieBanner: {
@@ -41,7 +41,8 @@ const styles = {
         padding: '0.5rem 1rem',
         cursor: 'pointer',
         fontSize: '0.9rem',
-        borderRadius: '4px'
+        borderRadius: '4px',
+        transition: 'background-color 0.2s ease'
     },
     cookieBannerText: {
         fontSize: '0.95rem',
@@ -53,32 +54,49 @@ const styles = {
         textDecoration: 'underline'
     }
 };
-const CookieBanner = ({ categories, content, storageStrategy }) => {
+const CookieBanner = ({ categories, content, storageStrategy = 'localStorage' }) => {
     const categoryKeys = categories.map((c) => c.key);
-    const { consent, isSet, saveConsent } = useConsent(categoryKeys, storageStrategy);
+    const { consent, isSet, saveConsent, isInitialized } = useConsent(categoryKeys, storageStrategy);
     const [showSettings, setShowSettings] = useState(false);
-    const [tempConsent, setTempConsent] = useState(consent);
+    const [tempConsent, setTempConsent] = useState({});
+    // Update tempConsent whenever consent changes
+    useEffect(() => {
+        if (isInitialized) {
+            setTempConsent(consent);
+        }
+    }, [consent, isInitialized]);
+    // Don't render anything until initialized to prevent hydration mismatches
+    if (!isInitialized)
+        return null;
+    // Don't show banner if consent is already set
     if (isSet)
         return null;
     const updateTemp = (key, value) => {
         setTempConsent((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
     };
     const acceptAll = () => {
-        const allTrue = {};
+        const allTrue = { necessary: true };
         categoryKeys.forEach((key) => {
             allTrue[key] = true;
         });
-        saveConsent(Object.assign({ necessary: true }, allTrue));
+        saveConsent(allTrue);
     };
     const saveSelected = () => {
         saveConsent(Object.assign({ necessary: true }, tempConsent));
     };
+    const acceptNecessaryOnly = () => {
+        const necessaryOnly = { necessary: true };
+        categoryKeys.forEach((key) => {
+            necessaryOnly[key] = false;
+        });
+        saveConsent(necessaryOnly);
+    };
     const handleButtonHover = (e) => {
         e.currentTarget.style.backgroundColor = '#333';
     };
     const handleButtonLeave = (e) => {
         e.currentTarget.style.backgroundColor = '#111';
     };
-    return (_jsx("div", { style: styles.cookieBanner, className: "cookie-banner-container", children: !showSettings ? (_jsxs("div", { style: styles.cookieBannerBasic, className: "cookie-banner-default", children: [_jsx("div", { style: styles.cookieBannerText, children: content || (_jsxs("p", { children: ["We use cookies to improve your experience.", ' ', _jsx("a", { href: "/privacy-policy", target: "_blank", rel: "noopener noreferrer", style: styles.cookieBannerTextLink, children: "Learn more" }), "."] })) }), _jsxs("div", { style: styles.cookieBannerButtons, className: "cookie-banner-buttons", children: [_jsx("button", { className: "cookie-banner-button-necessary", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => saveConsent({ necessary: true }), children: "Only necessary" }), _jsx("button", { className: "cookie-banner-button-settings", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(true), children: "Settings" }), _jsx("button", { className: "cookie-banner-button-all", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: acceptAll, children: "Accept all" })] })] })) : (_jsxs("div", { style: styles.cookieBannerSettings, className: "cookie-banner-settings", children: [_jsx("h4", { className: "cookie-banner-settings-heading", children: "Cookie Settings" }), _jsxs("label", { style: styles.cookieBannerSettingsLabel, className: "cookie-banner-category", children: [_jsx("input", { type: "checkbox", checked: true, disabled: true }), "Necessary (always active)"] }), categories.map((cat) => (_jsxs("label", { style: styles.cookieBannerSettingsLabel, className: "cookie-banner-category", children: [_jsx("input", { type: "checkbox", checked: tempConsent[cat.key] || false, onChange: (e) => updateTemp(cat.key, e.target.checked) }), cat.label] }, cat.key))), _jsxs("div", { style: styles.cookieBannerButtons, className: "cookie-banner-buttons", children: [_jsx("button", { className: "cookie-banner-button-save", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: saveSelected, children: "Save" }), _jsx("button", { className: "cookie-banner-button-back", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(false), children: "Back" })] })] })) }));
+    return (_jsx("div", { style: styles.cookieBanner, className: "njs-cookie-banner-container", children: !showSettings ? (_jsxs("div", { style: styles.cookieBannerBasic, className: "njs-cookie-banner-default", children: [_jsx("div", { style: styles.cookieBannerText, children: content || (_jsxs("p", { children: ["We use cookies to improve your experience.", ' ', _jsx("a", { href: "/privacy-policy", target: "_blank", rel: "noopener noreferrer", style: styles.cookieBannerTextLink, children: "Learn more" }), "."] })) }), _jsxs("div", { style: styles.cookieBannerButtons, className: "njs-cookie-banner-buttons", children: [_jsx("button", { className: "njs-cookie-banner-button-necessary", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: acceptNecessaryOnly, children: "Only necessary" }), _jsx("button", { className: "njs-cookie-banner-button-settings", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(true), children: "Settings" }), _jsx("button", { className: "njs-cookie-banner-button-all", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: acceptAll, children: "Accept all" })] })] })) : (_jsxs("div", { style: styles.cookieBannerSettings, className: "njs-cookie-banner-settings", children: [_jsx("h4", { className: "njs-cookie-banner-settings-heading", children: "Cookie Settings" }), _jsxs("label", { style: styles.cookieBannerSettingsLabel, className: "njs-cookie-banner-category", children: [_jsx("input", { type: "checkbox", checked: true, disabled: true }), "Necessary (always active)"] }), categories.map((cat) => (_jsxs("label", { style: styles.cookieBannerSettingsLabel, className: "njs-cookie-banner-category", children: [_jsx("input", { type: "checkbox", checked: tempConsent[cat.key] || false, onChange: (e) => updateTemp(cat.key, e.target.checked) }), cat.label] }, cat.key))), _jsxs("div", { style: styles.cookieBannerButtons, className: "njs-cookie-banner-buttons", children: [_jsx("button", { className: "njs-cookie-banner-button-save", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: saveSelected, children: "Save" }), _jsx("button", { className: "njs-cookie-banner-button-back", style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(false), children: "Back" })] })] })) }));
 };
 export default CookieBanner;

package/dist/src/useConsent.d.ts

@@ -3,5 +3,6 @@ export declare function useConsent(categoryKeys: string[], storageStrategy?: Sto
     consent: ConsentState;
     isSet: boolean;
     saveConsent: (newConsent: ConsentState) => void;
+    isInitialized: boolean;
 };
 //# sourceMappingURL=useConsent.d.ts.map

package/dist/src/useConsent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConsent.d.ts","sourceRoot":"","sources":["../../src/useConsent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAExD,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,eAAe,GAAE,eAAgC;;;8BA6C/D,YAAY;EAOhD"}
+{"version":3,"file":"useConsent.d.ts","sourceRoot":"","sources":["../../src/useConsent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAExD,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,eAAe,GAAE,eAAgC;;;8BAsEnD,YAAY;;EAc5D"}

package/dist/src/useConsent.js

@@ -1,12 +1,15 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
     const storageKey = 'cookie-consent';
-    const defaultConsent = Object.assign({ necessary: true }, categoryKeys.reduce((acc, key) => {
+    // Memoize defaultConsent to prevent unnecessary re-renders
+    const defaultConsent = useMemo(() => (Object.assign({ necessary: true }, categoryKeys.reduce((acc, key) => {
         acc[key] = false;
         return acc;
-    }, {}));
-    const getStoredConsent = () => {
+    }, {}))), [categoryKeys]);
+    const getStoredConsent = useCallback(() => {
         try {
+            if (typeof window === 'undefined')
+                return null; // SSR check
             if (storageStrategy === 'localStorage') {
                 const stored = localStorage.getItem(storageKey);
                 return stored ? JSON.parse(stored) : null;
@@ -16,32 +19,62 @@ export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
                 return match ? JSON.parse(decodeURIComponent(match[2])) : null;
             }
         }
-        catch (_a) {
+        catch (error) {
+            console.warn('Error reading consent from storage:', error);
             return null;
         }
-    };
-    const storeConsent = (consent) => {
-        const encoded = JSON.stringify(consent);
-        if (storageStrategy === 'localStorage') {
-            localStorage.setItem(storageKey, encoded);
+    }, [storageStrategy]);
+    const storeConsent = useCallback((consent) => {
+        try {
+            if (typeof window === 'undefined')
+                return; // SSR check
+            const encoded = JSON.stringify(consent);
+            if (storageStrategy === 'localStorage') {
+                localStorage.setItem(storageKey, encoded);
+            }
+            else {
+                const expires = new Date();
+                expires.setFullYear(expires.getFullYear() + 1);
+                document.cookie = `${storageKey}=${encodeURIComponent(encoded)}; path=/; SameSite=Lax; expires=${expires.toUTCString()}`;
+            }
         }
-        else {
-            document.cookie = `${storageKey}=${encodeURIComponent(encoded)}; path=/; SameSite=Lax`;
+        catch (error) {
+            console.error('Error storing consent:', error);
         }
-    };
+    }, [storageStrategy]);
     const [consent, setConsent] = useState(defaultConsent);
     const [isSet, setIsSet] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Initialize consent from storage
     useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
         const stored = getStoredConsent();
         if (stored) {
-            setConsent(stored);
+            // Merge stored consent with default consent to ensure all categories are present
+            // This handles cases where new categories were added after the user already gave consent
+            const mergedConsent = Object.assign(Object.assign({}, defaultConsent), stored);
+            setConsent(mergedConsent);
             setIsSet(true);
         }
-    }, []);
-    const saveConsent = (newConsent) => {
-        storeConsent(newConsent);
-        setConsent(newConsent);
+        else {
+            // No stored consent found, use default
+            setConsent(defaultConsent);
+            setIsSet(false);
+        }
+        setIsInitialized(true);
+    }, [defaultConsent, getStoredConsent]);
+    const saveConsent = useCallback((newConsent) => {
+        const finalConsent = Object.assign({ necessary: true }, newConsent); // Ensure necessary is always true
+        storeConsent(finalConsent);
+        setConsent(finalConsent);
         setIsSet(true);
+    }, [storeConsent]);
+    // Return isInitialized to prevent rendering issues during SSR/hydration
+    return {
+        consent,
+        isSet: isSet && isInitialized,
+        saveConsent,
+        isInitialized
     };
-    return { consent, isSet, saveConsent };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-cookie-consent",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "GDPR-compliant cookie consent banner with fully customizable categories for Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",