nextjs-cookie-consent 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/CookieBanner.d.ts.map +1 -1
- package/dist/src/CookieBanner.js +16 -5
- package/dist/src/useConsent.d.ts.map +1 -1
- package/dist/src/useConsent.js +14 -5
- package/package.json +1 -1
- package/readme.md +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CookieBanner.d.ts","sourceRoot":"","sources":["../../src/CookieBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
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"}
|
package/dist/src/CookieBanner.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from 'react';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
4
|
import { useConsent } from './useConsent';
|
|
5
5
|
const styles = {
|
|
6
6
|
cookieBanner: {
|
|
@@ -57,28 +57,39 @@ const CookieBanner = ({ categories, content, storageStrategy }) => {
|
|
|
57
57
|
const categoryKeys = categories.map((c) => c.key);
|
|
58
58
|
const { consent, isSet, saveConsent } = useConsent(categoryKeys, storageStrategy);
|
|
59
59
|
const [showSettings, setShowSettings] = useState(false);
|
|
60
|
-
const [tempConsent, setTempConsent] = useState(
|
|
60
|
+
const [tempConsent, setTempConsent] = useState({});
|
|
61
|
+
// Update tempConsent whenever consent changes
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
setTempConsent(consent);
|
|
64
|
+
}, [consent]);
|
|
61
65
|
if (isSet)
|
|
62
66
|
return null;
|
|
63
67
|
const updateTemp = (key, value) => {
|
|
64
68
|
setTempConsent((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
|
|
65
69
|
};
|
|
66
70
|
const acceptAll = () => {
|
|
67
|
-
const allTrue = {};
|
|
71
|
+
const allTrue = { necessary: true };
|
|
68
72
|
categoryKeys.forEach((key) => {
|
|
69
73
|
allTrue[key] = true;
|
|
70
74
|
});
|
|
71
|
-
saveConsent(
|
|
75
|
+
saveConsent(allTrue);
|
|
72
76
|
};
|
|
73
77
|
const saveSelected = () => {
|
|
74
78
|
saveConsent(Object.assign({ necessary: true }, tempConsent));
|
|
75
79
|
};
|
|
80
|
+
const acceptNecessaryOnly = () => {
|
|
81
|
+
const necessaryOnly = { necessary: true };
|
|
82
|
+
categoryKeys.forEach((key) => {
|
|
83
|
+
necessaryOnly[key] = false;
|
|
84
|
+
});
|
|
85
|
+
saveConsent(necessaryOnly);
|
|
86
|
+
};
|
|
76
87
|
const handleButtonHover = (e) => {
|
|
77
88
|
e.currentTarget.style.backgroundColor = '#333';
|
|
78
89
|
};
|
|
79
90
|
const handleButtonLeave = (e) => {
|
|
80
91
|
e.currentTarget.style.backgroundColor = '#111';
|
|
81
92
|
};
|
|
82
|
-
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:
|
|
93
|
+
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" })] })] })) }));
|
|
83
94
|
};
|
|
84
95
|
export default CookieBanner;
|
|
@@ -1 +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;;;
|
|
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"}
|
package/dist/src/useConsent.js
CHANGED
|
@@ -7,6 +7,8 @@ export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
|
|
|
7
7
|
}, {}));
|
|
8
8
|
const getStoredConsent = () => {
|
|
9
9
|
try {
|
|
10
|
+
if (typeof window === 'undefined')
|
|
11
|
+
return null; // SSR check
|
|
10
12
|
if (storageStrategy === 'localStorage') {
|
|
11
13
|
const stored = localStorage.getItem(storageKey);
|
|
12
14
|
return stored ? JSON.parse(stored) : null;
|
|
@@ -21,12 +23,16 @@ export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
|
|
|
21
23
|
}
|
|
22
24
|
};
|
|
23
25
|
const storeConsent = (consent) => {
|
|
26
|
+
if (typeof window === 'undefined')
|
|
27
|
+
return; // SSR check
|
|
24
28
|
const encoded = JSON.stringify(consent);
|
|
25
29
|
if (storageStrategy === 'localStorage') {
|
|
26
30
|
localStorage.setItem(storageKey, encoded);
|
|
27
31
|
}
|
|
28
32
|
else {
|
|
29
|
-
|
|
33
|
+
const expires = new Date();
|
|
34
|
+
expires.setFullYear(expires.getFullYear() + 1);
|
|
35
|
+
document.cookie = `${storageKey}=${encodeURIComponent(encoded)}; path=/; SameSite=Lax; expires=${expires.toUTCString()}`;
|
|
30
36
|
}
|
|
31
37
|
};
|
|
32
38
|
const [consent, setConsent] = useState(defaultConsent);
|
|
@@ -34,13 +40,16 @@ export function useConsent(categoryKeys, storageStrategy = 'localStorage') {
|
|
|
34
40
|
useEffect(() => {
|
|
35
41
|
const stored = getStoredConsent();
|
|
36
42
|
if (stored) {
|
|
37
|
-
|
|
43
|
+
// Merge stored consent with default consent to ensure all categories are present
|
|
44
|
+
const mergedConsent = Object.assign(Object.assign({}, defaultConsent), stored);
|
|
45
|
+
setConsent(mergedConsent);
|
|
38
46
|
setIsSet(true);
|
|
39
47
|
}
|
|
40
|
-
}, []);
|
|
48
|
+
}, [categoryKeys.join(',')]); // Dependency auf categoryKeys um Re-render bei Änderungen zu triggern
|
|
41
49
|
const saveConsent = (newConsent) => {
|
|
42
|
-
|
|
43
|
-
|
|
50
|
+
const finalConsent = Object.assign(Object.assign({}, consent), newConsent);
|
|
51
|
+
storeConsent(finalConsent);
|
|
52
|
+
setConsent(finalConsent);
|
|
44
53
|
setIsSet(true);
|
|
45
54
|
};
|
|
46
55
|
return { consent, isSet, saveConsent };
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -171,18 +171,18 @@ interface CookieCategory {
|
|
|
171
171
|
You can override the styles and adjust them to your liking.
|
|
172
172
|
Following classes are used:
|
|
173
173
|
|
|
174
|
-
| Element | Class name
|
|
175
|
-
|
|
176
|
-
| Whole Banner | `.cookie-banner-container` |
|
|
177
|
-
| Default Banner view | `.cookie-banner-default` |
|
|
178
|
-
| Settings Banner view | `.cookie-banner-settings` |
|
|
179
|
-
| Button group | `.cookie-banner-buttons` |
|
|
180
|
-
| "Only necessary"-button | `.cookie-banner-button-necessary` |
|
|
181
|
-
| "Settings"-button | `.cookie-banner-button-settings` |
|
|
182
|
-
| "Cookie Settings"-heading | `.cookie-banner-settings-heading` |
|
|
183
|
-
| Cookie Category labels | `.cookie-banner-category` |
|
|
184
|
-
| "Save"-button | `.cookie-banner-button-save` |
|
|
185
|
-
| "Back"-button | `.cookie-banner-button-back` |
|
|
174
|
+
| Element | Class name |
|
|
175
|
+
|---------------------------|---------------------------------------|
|
|
176
|
+
| Whole Banner | `.njs-cookie-banner-container` |
|
|
177
|
+
| Default Banner view | `.njs-cookie-banner-default` |
|
|
178
|
+
| Settings Banner view | `.njs-cookie-banner-settings` |
|
|
179
|
+
| Button group | `.njs-cookie-banner-buttons` |
|
|
180
|
+
| "Only necessary"-button | `.njs-cookie-banner-button-necessary` |
|
|
181
|
+
| "Settings"-button | `.njs-cookie-banner-button-settings` |
|
|
182
|
+
| "Cookie Settings"-heading | `.njs-cookie-banner-settings-heading` |
|
|
183
|
+
| Cookie Category labels | `.njs-cookie-banner-category` |
|
|
184
|
+
| "Save"-button | `.njs-cookie-banner-button-save` |
|
|
185
|
+
| "Back"-button | `.njs-cookie-banner-button-back` |
|
|
186
186
|
|
|
187
187
|
---
|
|
188
188
|
|