nextjs-cookie-consent 1.0.2 → 1.0.4

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

@@ -1 +1 @@
-{"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;AAuD1E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmI7C,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,EAAgB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkE1D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwI7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/src/CookieBanner.js

@@ -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,23 +54,35 @@ const styles = {
         textDecoration: 'underline'
     }
 };
-const CookieBanner = ({ categories, content, storageStrategy }) => {
-    const categoryKeys = categories.map((c) => c.key);
-    const { consent, isSet, saveConsent } = useConsent(categoryKeys, storageStrategy);
+const objectsEqual = (a, b) => {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (a[key] !== b[key])
+            return false;
+    }
+    return true;
+};
+const CookieBanner = ({ categories, content, storageStrategy = 'localStorage' }) => {
+    const categoryKeys = categories.map(c => c.key);
+    const { consent, isSet, saveConsent, isInitialized } = useConsent(categoryKeys, storageStrategy);
     const [showSettings, setShowSettings] = useState(false);
     const [tempConsent, setTempConsent] = useState({});
-    // Update tempConsent whenever consent changes
     useEffect(() => {
-        setTempConsent(consent);
-    }, [consent]);
-    if (isSet)
+        if (isInitialized && !objectsEqual(tempConsent, consent)) {
+            setTempConsent(consent);
+        }
+    }, [consent, isInitialized]);
+    if (!isInitialized || isSet)
         return null;
     const updateTemp = (key, value) => {
-        setTempConsent((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+        setTempConsent(prev => (Object.assign(Object.assign({}, prev), { [key]: value })));
     };
     const acceptAll = () => {
         const allTrue = { necessary: true };
-        categoryKeys.forEach((key) => {
+        categoryKeys.forEach(key => {
             allTrue[key] = true;
         });
         saveConsent(allTrue);
@@ -79,7 +92,7 @@ const CookieBanner = ({ categories, content, storageStrategy }) => {
     };
     const acceptNecessaryOnly = () => {
         const necessaryOnly = { necessary: true };
-        categoryKeys.forEach((key) => {
+        categoryKeys.forEach(key => {
             necessaryOnly[key] = false;
         });
         saveConsent(necessaryOnly);
@@ -90,6 +103,6 @@ const CookieBanner = ({ categories, content, storageStrategy }) => {
     const handleButtonLeave = (e) => {
         e.currentTarget.style.backgroundColor = '#111';
     };
-    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" })] })] })) }));
+    return (_jsx("div", { style: styles.cookieBanner, className: "njs-cookie-banner-container", children: !showSettings ? (_jsxs("div", { style: styles.cookieBannerBasic, 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, children: [_jsx("button", { style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: acceptNecessaryOnly, children: "Only necessary" }), _jsx("button", { style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(true), children: "Settings" }), _jsx("button", { style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: acceptAll, children: "Accept all" })] })] })) : (_jsxs("div", { style: styles.cookieBannerSettings, children: [_jsx("h4", { children: "Cookie Settings" }), _jsxs("label", { style: styles.cookieBannerSettingsLabel, children: [_jsx("input", { type: "checkbox", checked: true, disabled: true }), "Necessary (always active)"] }), categories.map(cat => (_jsxs("label", { style: styles.cookieBannerSettingsLabel, 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, children: [_jsx("button", { style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: saveSelected, children: "Save" }), _jsx("button", { style: styles.cookieBannerButton, onMouseEnter: handleButtonHover, onMouseLeave: handleButtonLeave, onClick: () => setShowSettings(false), children: "Back" })] })] })) }));
 };
 export default CookieBanner;

package/dist/src/useConsent.d.ts

@@ -1,7 +1,8 @@
-import { ConsentState, StorageStrategy } from './types';
-export declare function useConsent(categoryKeys: string[], storageStrategy?: StorageStrategy): {
+import { ConsentState } from './types';
+export declare const useConsent: (categoryKeys: string[], storageStrategy?: "localStorage" | "cookie") => {
     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;;;8BAqD/D,YAAY;EAQhD"}
+{"version":3,"file":"useConsent.d.ts","sourceRoot":"","sources":["../../src/useConsent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA0BvC,eAAO,MAAM,UAAU,GACnB,cAAc,MAAM,EAAE,EACtB,kBAAiB,cAAc,GAAG,QAAyB;;;8BAe1B,YAAY,KAAG,IAAI;;CAYvD,CAAC"}

package/dist/src/useConsent.js

@@ -1,56 +1,48 @@
 import { useState, useEffect } from 'react';
-export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
-    const storageKey = 'cookie-consent';
-    const defaultConsent = Object.assign({ necessary: true }, categoryKeys.reduce((acc, key) => {
-        acc[key] = false;
-        return acc;
-    }, {}));
-    const getStoredConsent = () => {
-        try {
-            if (typeof window === 'undefined')
-                return null; // SSR check
-            if (storageStrategy === 'localStorage') {
-                const stored = localStorage.getItem(storageKey);
-                return stored ? JSON.parse(stored) : null;
-            }
-            else {
-                const match = document.cookie.match(new RegExp('(^| )' + storageKey + '=([^;]+)'));
-                return match ? JSON.parse(decodeURIComponent(match[2])) : null;
-            }
-        }
-        catch (_a) {
-            return null;
-        }
-    };
-    const storeConsent = (consent) => {
-        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()}`;
-        }
-    };
-    const [consent, setConsent] = useState(defaultConsent);
+const CONSENT_KEY = 'user_consent';
+function getStoredConsent(strategy) {
+    var _a;
+    try {
+        const data = strategy === 'localStorage'
+            ? localStorage.getItem(CONSENT_KEY)
+            : decodeURIComponent(((_a = document.cookie.split('; ')
+                .find(row => row.startsWith(CONSENT_KEY + '='))) === null || _a === void 0 ? void 0 : _a.split('=')[1]) || '');
+        return data ? JSON.parse(data) : null;
+    }
+    catch (_b) {
+        return null;
+    }
+}
+function storeConsent(consent, strategy) {
+    const value = JSON.stringify(consent);
+    if (strategy === 'localStorage') {
+        localStorage.setItem(CONSENT_KEY, value);
+    }
+    else {
+        document.cookie = `${CONSENT_KEY}=${encodeURIComponent(value)}; path=/; max-age=31536000`;
+    }
+}
+export const useConsent = (categoryKeys, storageStrategy = 'localStorage') => {
+    const [consent, setConsent] = useState({});
     const [isSet, setIsSet] = useState(false);
+    const [isInitialized, setInitialized] = useState(false);
     useEffect(() => {
-        const stored = getStoredConsent();
+        const stored = getStoredConsent(storageStrategy);
         if (stored) {
-            // Merge stored consent with default consent to ensure all categories are present
-            const mergedConsent = Object.assign(Object.assign({}, defaultConsent), stored);
-            setConsent(mergedConsent);
+            setConsent(stored);
             setIsSet(true);
         }
-    }, [categoryKeys.join(',')]); // Dependency auf categoryKeys um Re-render bei Änderungen zu triggern
+        setInitialized(true);
+    }, []);
     const saveConsent = (newConsent) => {
-        const finalConsent = Object.assign(Object.assign({}, consent), newConsent);
-        storeConsent(finalConsent);
-        setConsent(finalConsent);
+        setConsent(newConsent);
         setIsSet(true);
+        storeConsent(newConsent, storageStrategy);
     };
-    return { consent, isSet, saveConsent };
-}
+    return {
+        consent,
+        isSet,
+        saveConsent,
+        isInitialized
+    };
+};

package/package.json

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