nextjs-cookie-consent 1.0.3 → 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;AAwD1E,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkJ7C,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

@@ -54,29 +54,35 @@ const styles = {
         textDecoration: 'underline'
     }
 };
+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 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(() => {
-        if (isInitialized) {
+        if (isInitialized && !objectsEqual(tempConsent, consent)) {
             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)
+    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);
@@ -86,7 +92,7 @@ const CookieBanner = ({ categories, content, storageStrategy = 'localStorage' })
     };
     const acceptNecessaryOnly = () => {
         const necessaryOnly = { necessary: true };
-        categoryKeys.forEach((key) => {
+        categoryKeys.forEach(key => {
             necessaryOnly[key] = false;
         });
         saveConsent(necessaryOnly);
@@ -97,6 +103,6 @@ const CookieBanner = ({ categories, content, storageStrategy = 'localStorage' })
     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,5 +1,5 @@
-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;

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;;;8BAsEnD,YAAY;;EAc5D"}
+{"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,80 +1,48 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
-    const storageKey = 'cookie-consent';
-    // Memoize defaultConsent to prevent unnecessary re-renders
-    const defaultConsent = useMemo(() => (Object.assign({ necessary: true }, categoryKeys.reduce((acc, key) => {
-        acc[key] = false;
-        return acc;
-    }, {}))), [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;
-            }
-            else {
-                const match = document.cookie.match(new RegExp('(^| )' + storageKey + '=([^;]+)'));
-                return match ? JSON.parse(decodeURIComponent(match[2])) : null;
-            }
-        }
-        catch (error) {
-            console.warn('Error reading consent from storage:', error);
-            return null;
-        }
-    }, [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()}`;
-            }
-        }
-        catch (error) {
-            console.error('Error storing consent:', error);
-        }
-    }, [storageStrategy]);
-    const [consent, setConsent] = useState(defaultConsent);
+import { useState, useEffect } from 'react';
+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, setIsInitialized] = useState(false);
-    // Initialize consent from storage
+    const [isInitialized, setInitialized] = useState(false);
     useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const stored = getStoredConsent();
+        const stored = getStoredConsent(storageStrategy);
         if (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);
+            setConsent(stored);
             setIsSet(true);
         }
-        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);
+        setInitialized(true);
+    }, []);
+    const saveConsent = (newConsent) => {
+        setConsent(newConsent);
         setIsSet(true);
-    }, [storeConsent]);
-    // Return isInitialized to prevent rendering issues during SSR/hydration
+        storeConsent(newConsent, storageStrategy);
+    };
     return {
         consent,
-        isSet: isSet && isInitialized,
+        isSet,
         saveConsent,
         isInitialized
     };
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-cookie-consent",
-  "version": "1.0.3",
+  "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",