nextjs-cookie-consent 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CookieBanner } from './src/CookieBanner';
+export * from './src/types';
+export * from './src/useConsent';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as CookieBanner } from './src/CookieBanner';
+export * from './src/types';
+export * from './src/useConsent';

package/dist/src/CookieBanner.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CookieBannerProps } from './types';
+declare const CookieBanner: React.FC<CookieBannerProps>;
+export default CookieBanner;
+//# sourceMappingURL=CookieBanner.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/CookieBanner.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useConsent } from './useConsent';
+const styles = {
+    cookieBanner: {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: 'white',
+        padding: '1rem',
+        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
+        zIndex: 1000,
+        fontFamily: 'sans-serif'
+    },
+    cookieBannerBasic: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem'
+    },
+    cookieBannerSettings: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.75rem'
+    },
+    cookieBannerSettingsLabel: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem'
+    },
+    cookieBannerButtons: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+    },
+    cookieBannerButton: {
+        backgroundColor: '#111',
+        color: 'white',
+        border: 'none',
+        padding: '0.5rem 1rem',
+        cursor: 'pointer',
+        fontSize: '0.9rem',
+        borderRadius: '4px'
+    },
+    cookieBannerText: {
+        fontSize: '0.95rem',
+        lineHeight: 1.5,
+        marginBottom: '0.5rem'
+    },
+    cookieBannerTextLink: {
+        color: '#0070f3',
+        textDecoration: 'underline'
+    }
+};
+const CookieBanner = ({ categories, content, storageStrategy }) => {
+    const categoryKeys = categories.map((c) => c.key);
+    const { consent, isSet, saveConsent } = useConsent(categoryKeys, storageStrategy);
+    const [showSettings, setShowSettings] = useState(false);
+    const [tempConsent, setTempConsent] = useState(consent);
+    if (isSet)
+        return null;
+    const updateTemp = (key, value) => {
+        setTempConsent((prev) => (Object.assign(Object.assign({}, prev), { [key]: value })));
+    };
+    const acceptAll = () => {
+        const allTrue = {};
+        categoryKeys.forEach((key) => {
+            allTrue[key] = true;
+        });
+        saveConsent(Object.assign({ necessary: true }, allTrue));
+    };
+    const saveSelected = () => {
+        saveConsent(Object.assign({ necessary: true }, tempConsent));
+    };
+    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" })] })] })) }));
+};
+export default CookieBanner;

package/dist/src/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface CookieCategory {
+    key: string;
+    label: string;
+}
+export type ConsentState = Record<string, boolean>;
+export type StorageStrategy = 'localStorage' | 'cookie';
+export interface CookieBannerProps {
+    categories: CookieCategory[];
+    content?: ReactNode;
+    storageStrategy?: StorageStrategy;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,cAAc;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,iBAAiB;IAC9B,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;CACrC"}

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/useConsent.d.ts

@@ -0,0 +1,7 @@
+import { ConsentState, StorageStrategy } from './types';
+export declare function useConsent(categoryKeys: string[], storageStrategy?: StorageStrategy): {
+    consent: ConsentState;
+    isSet: boolean;
+    saveConsent: (newConsent: ConsentState) => void;
+};
+//# sourceMappingURL=useConsent.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/useConsent.js

@@ -0,0 +1,47 @@
+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 (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) => {
+        const encoded = JSON.stringify(consent);
+        if (storageStrategy === 'localStorage') {
+            localStorage.setItem(storageKey, encoded);
+        }
+        else {
+            document.cookie = `${storageKey}=${encodeURIComponent(encoded)}; path=/; SameSite=Lax`;
+        }
+    };
+    const [consent, setConsent] = useState(defaultConsent);
+    const [isSet, setIsSet] = useState(false);
+    useEffect(() => {
+        const stored = getStoredConsent();
+        if (stored) {
+            setConsent(stored);
+            setIsSet(true);
+        }
+    }, []);
+    const saveConsent = (newConsent) => {
+        storeConsent(newConsent);
+        setConsent(newConsent);
+        setIsSet(true);
+    };
+    return { consent, isSet, saveConsent };
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "nextjs-cookie-consent",
+  "version": "1.0.0",
+  "description": "GDPR-compliant cookie consent banner with fully customizable categories for Next.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [
+    "cookie",
+    "banner",
+    "nextjs",
+    "consent",
+    "gdpr",
+    "cookie-consent"
+  ],
+  "author": "Lukas Schweiger",
+  "license": "MIT",
+  "peerDependencies": {
+    "next": "^15.0.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.4.0"
+  }
+}

package/readme.md

@@ -0,0 +1,211 @@
+# 🍪 nextjs-cookie-consent
+
+A 🛡️ **GDPR / DSGVO-compliant cookie consent banner for Next.js** with fully customizable categories like `analytics`, `marketing`, or `preferences`. Built for modern apps with easy styling, flexible API, and localStorage- or cookie-based consent handling.
+
+---
+
+## ✨ Features
+
+- ✅ GDPR / DSGVO-compliant: Only essential cookies are enabled by default
+- 🧠 Fully configurable categories (e.g. Necessary, Analytics, Marketing, ...)
+- 💬 Custom text with links to your privacy policy
+- 💾 Consent stored in `localStorage` *(or cookies – configurable!)*
+- 🔄 Dynamic access to user consent via `useConsent()` hook
+- 🧱 Compatible with both **App Router** and **Pages Router**
+- 🎨 Minimal styling (fully customizable)
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install nextjs-cookie-consent
+```
+
+or with Yarn:
+
+```bash
+yarn add nextjs-cookie-consent
+```
+
+---
+
+## ⚙️ Usage
+
+### ➕ Import the component
+
+Import the component and CSS in your root layout or `_app.tsx`.
+
+#### App Router (`app/layout.tsx`):
+
+```tsx
+import { CookieBanner } from 'nextjs-cookie-consent';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <CookieBanner
+          categories={[
+            { key: 'analytics', label: 'Analytics' },
+            { key: 'marketing', label: 'Marketing' },
+          ]}
+          storageStrategy="cookie" // ← optional: "cookie" or "localStorage" (default)
+          content={
+            <p>
+              We use cookies to improve your experience.{' '}
+              <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">
+                Learn more
+              </a>
+              .
+            </p>
+          }
+        />
+      </body>
+    </html>
+  );
+}
+```
+
+---
+
+### 🔄 Switch storage to cookies
+
+By default, consent is saved to `localStorage`.  
+You can enable cookie-based storage like this:
+
+```tsx
+<CookieBanner
+  categories={[
+    { key: 'analytics', label: 'Analytics' },
+    { key: 'marketing', label: 'Marketing' },
+  ]}
+  storageStrategy="cookie"
+/>
+```
+
+Cookies are set with `SameSite=Lax` and `path=/`.
+
+---
+
+## 📊 Accessing Consent State
+
+Use the `useConsent()` hook anywhere in your app to check if a user has accepted a specific category:
+
+```tsx
+'use client';
+
+import { useConsent } from 'nextjs-cookie-consent';
+
+export default function AnalyticsLoader() {
+  const { consent } = useConsent(['analytics', 'marketing']);
+
+  return (
+    <>
+      {consent.analytics && <p>📈 Analytics enabled</p>}
+      {!consent.analytics && <p>❌ Analytics disabled</p>}
+    </>
+  );
+}
+```
+
+---
+
+## 🧪 Example: Load Google Analytics only after consent
+
+```tsx
+'use client';
+
+import Script from 'next/script';
+import { useConsent } from 'nextjs-cookie-consent';
+
+export default function GoogleAnalytics() {
+  const { consent } = useConsent(['analytics']);
+
+  if (!consent.analytics) return null;
+
+  return (
+    <>
+      <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" strategy="afterInteractive" />
+      <Script id="ga-init" strategy="afterInteractive">
+        {`window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', 'G-XXXXXXX');`}
+      </Script>
+    </>
+  );
+}
+```
+
+---
+
+## ⚠️ GDPR / DSGVO Tips
+
+- 👉 Always link to your cookie/privacy policy using the `content` property
+- 🚫 Never load external scripts (e.g., Google, Meta) **before consent**
+- 🔐 Use cookies if `localStorage` is not allowed/possible in your compliance context
+
+---
+
+## 🧰 Props & API
+
+| Prop             | Type                                | Description                                                                            |
+|------------------|-------------------------------------|----------------------------------------------------------------------------------------|
+| `categories`     | `CookieCategory[]`                  | An array of consent categories to configure                                           |
+| `content`        | `React.ReactNode`                   | *(optional)* Custom JSX/HTML content shown above the buttons                         |
+| `storageStrategy`| `'localStorage'` \| `'cookie'`      | *(optional)* Where to store consent. Default: `'localStorage'`                       |
+
+```ts
+interface CookieCategory {
+  key: string;   // e.g. "analytics"
+  label: string; // e.g. "Analytics"
+}
+```
+
+---
+
+## 🎨 Styling
+
+You can override the styles and adjust them to your liking.
+Following classes are used:
+
+| Element                   | Class name                        |
+|---------------------------|-----------------------------------|
+| Whole Banner              | `.cookie-banner-container`        |
+| Default Banner view       | `.cookie-banner-default`          |
+| Settings Banner view      | `.cookie-banner-settings`         |
+| Button group              | `.cookie-banner-buttons`          |
+| "Only necessary"-button   | `.cookie-banner-button-necessary` |
+| "Settings"-button         | `.cookie-banner-button-settings`  |
+| "Cookie Settings"-heading | `.cookie-banner-settings-heading` |
+| Cookie Category labels    | `.cookie-banner-category`         |
+| "Save"-button             | `.cookie-banner-button-save`      |
+| "Back"-button             | `.cookie-banner-button-back`      |
+
+---
+
+## 💡 FAQ
+
+**Can I use cookies instead of localStorage?**
+> ✅ Yes – set `storageStrategy="cookie"` in the component props.
+
+**Is this compatible with Server Components?**
+> ✅ Yes – the banner is a client component and works inside any layout or `_app.tsx`.
+
+**Is "necessary" always enabled?**
+> ✅ Yes – the `necessary` flag is always true and cannot be disabled so you can load scripts/cookies which are necessary for your application.
+
+---
+
+## 🤝 Contributing
+
+Pull requests and issues are very welcome! This project is open source — feel free to improve it 💪
+
+---
+
+## ⚖️ License
+
+MIT – free to use for personal and commercial projects.  
+Built with ❤️ for modern Next.js apps.