{"_id":"@darmiuskz/cookie-consent-manager","_rev":"2-32e05fcb74b6d6214b99c73be6660942","name":"@darmiuskz/cookie-consent-manager","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@darmiuskz/cookie-consent-manager","version":"1.0.0","keywords":["cookie","consent","gdpr","localStorage","cookie-banner"],"author":"","license":"MIT","_id":"@darmiuskz/cookie-consent-manager@1.0.0","maintainers":[{"name":"darmiuskz","email":"admin@darmius.kz"}],"dist":{"shasum":"405412a415afb7831c6cd93e9bb18cc6ca8a4006","tarball":"https://registry.npmjs.org/@darmiuskz/cookie-consent-manager/-/cookie-consent-manager-1.0.0.tgz","fileCount":16,"integrity":"sha512-RB/pS+FSzhIY7FUhX01zfobqpebDg4G1U88ZwfWoPk/6AqVnkwJ8bFvTwCFBOocP1zmv8euuk+7OZmyBD9Ktig==","signatures":[{"sig":"MEQCID30Jk+2u8EN76Em14j7lQcbM4TO2k/NqOg4xnrgOdHmAiAQ4rrQdZ9fbHEiwnq+lWujAuex+osmG7QNyEeT+9brRw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16319},"main":"src/index.js","gitHead":"659f5db01badddcbb37b19ea06ff4ba446d9bd37","scripts":{"build":"tsc && npm run copy:css","clean":"rimraf dist","watch":"tsc -w","prepare":"npm run build","copy:css":"copyfiles -u 1 src/banner/banner.css dist"},"_npmUser":{"name":"darmiuskz","email":"admin@darmius.kz"},"_npmVersion":"9.8.1","description":"A lightweight, backend-ready cookie consent logic manager.","directories":{},"_nodeVersion":"18.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"copyfiles":"^2.4.1","typescript":"^5.8.3","@types/react":"^19.1.0","@types/react-dom":"^19.1.1"},"_npmOperationalInternal":{"tmp":"tmp/cookie-consent-manager_1.0.0_1744193153128_0.6534820145817248","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@darmiuskz/cookie-consent-manager","version":"1.0.1","description":"A lightweight, backend-ready cookie consent logic manager.","main":"src/index.js","scripts":{"build":"tsc && npm run copy:css","watch":"tsc -w","clean":"rimraf dist","prepare":"npm run build","copy:css":"copyfiles -u 1 src/banner/banner.css dist"},"keywords":["cookie","consent","gdpr","localStorage","cookie-banner"],"author":"","license":"MIT","devDependencies":{"@types/react":"^19.1.0","@types/react-dom":"^19.1.1","copyfiles":"^2.4.1","typescript":"^5.8.3"},"publishConfig":{"access":"public"},"_id":"@darmiuskz/cookie-consent-manager@1.0.1","gitHead":"9fe27d2aa3481ad1abfc8cbfbb9a6b9a117411bd","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-OGYhJEps8lncH+C/WMraR7moyQrHtfHEm2OVqctMx115iHolFg8MOQ1QvKESe0pyoyWA5tsu1EVhYqpcPHyRYQ==","shasum":"cf32419e9d5a766ed00bc2610193c8426783ccab","tarball":"https://registry.npmjs.org/@darmiuskz/cookie-consent-manager/-/cookie-consent-manager-1.0.1.tgz","fileCount":17,"unpackedSize":23612,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHXSuWxgITW+Z+zU5niO6K55PNZBEcAUY5rkMQ9grcVJAiAVxBb/ihe4OHcPq1y0KWkDESpiRi0c8TtI8+PP3i9FJQ=="}]},"_npmUser":{"name":"darmiuskz","email":"admin@darmius.kz"},"directories":{},"maintainers":[{"name":"darmiuskz","email":"admin@darmius.kz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cookie-consent-manager_1.0.1_1744700558700_0.3053841904272012"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-09T10:05:53.061Z","modified":"2025-04-15T07:02:39.034Z","1.0.0":"2025-04-09T10:05:53.275Z","1.0.1":"2025-04-15T07:02:38.866Z"},"license":"MIT","keywords":["cookie","consent","gdpr","localStorage","cookie-banner"],"description":"A lightweight, backend-ready cookie consent logic manager.","maintainers":[{"name":"darmiuskz","email":"admin@darmius.kz"}],"readme":"# 🍪 cookie-consent-kit\n\nA flexible, customizable, framework-friendly cookie consent manager.  \nSupports both **React** and **Vanilla JS** usage.  \nWorks with modals, banners, and page-based preference management.\n\n---\n\n## ✨ Features\n\n- ✅ Drop-in `<Banner />` and `<Modal />` components for React\n- ✅ Plain `showBanner()` + modal for HTML/JS\n- ✅ Support for custom categories (analytics, marketing, etc.)\n- ✅ Backend syncing with token & API endpoint\n- ✅ Automatically enables analytics (e.g. GA4) if consented\n- ✅ One-time setup with full reusability across projects\n\n---\n\n## 🚀 Installation\n\n### NPM\n\n```bash\nnpm install @darmiuskz/cookie-consent-manager\n```\n## ⚙️ setupCookieConsent(options)\n### Options\n\n| Option      | Type     | Description                                                                 |\n|-------------|----------|-----------------------------------------------------------------------------|\n| `serverMode`| `boolean`| Enable syncing with backend. If `true`, fetches and stores consent via API. |\n| `apiUrl`    | `string` | URL of your consent API (used when `serverMode: true`).                     |\n| `userToken` | `string` | Token to identify the current user (e.g. JWT or session ID).                |\n| `categories`| `object` | List of cookie categories the user can consent to (see below).              |\n\n### 🍪 Category Object\n```bash\nanalytics: {\n  label: 'Analytics',                    // Display name for the category\n  description: 'Track user behavior',    // Optional longer explanation\n  customizable: true,                    // Whether user can toggle it\n  scripts: [                             // Optional scripts to inject\n    {\n      src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',\n      name: 'Google Tag Manager'\n    }\n  ]\n}\n```\n\n## Banner Options\n\n- `message` — Text to show at the top of the banner\n- `buttons.customize` — Text for the customize button\n- `buttons.showCustomize` — Boolean to show/hide the customize button\n- `customizeMode` — `'modal'` or `'page'`; defines what happens when user clicks Customize. By default, it is 'modal'\n- `customizePageUrl` — URL to redirect to if `customizeMode: 'page'`\n\n## 🔧 Setup (React or JS)\n### React (TypeScript)\n```bash\nimport { setupCookieConsent, Banner, Modal } from '@darmiuskz/cookie-consent-kit/react';\n\nsetupCookieConsent({\n  serverMode: true,\n  apiUrl: 'https://your-api.com/consent',\n  userToken: 'abc123',\n  categories: {\n    label: 'Analytics',\n      description: 'Helps us understand user behavior.',\n      customizable: true,\n      scripts: [\n        {\n          src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',\n          name: 'Google Tag Manager'\n        }\n      ],\n    },\n    marketing: {\n      label: 'Marketing',\n      description: 'Tracks ads and conversions.',\n      customizable: true,\n      scripts: [\n        {\n          inline: `\n            !function(f,b,e,v,n,t,s)\n            {if(f.fbq)return;n=f.fbq=function(){n.callMethod ?\n            n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n            n.queue=[];t=b.createElement(e);t.async=!0;\n            t.src=v;s=b.getElementsByTagName(e)[0];\n            s.parentNode.insertBefore(t,s)}(window, document,'script',\n            'https://connect.facebook.net/en_US/fbevents.js');\n            fbq('init', 'YOUR_PIXEL_ID'); \n            fbq('track', 'PageView');\n          `,\n          name: 'Facebook Pixel'\n        }\n      ]\n    }\n  }\n});\n```\nThen in your layout\n```bash\n<Banner\n  message=\"We use cookies 🍪 to improve your experience.\"\n  buttons={{ customize: \"Customize\" }}\n  customizeMode=\"modal\"\n/>\n\n<Modal>\n  <YourPreferenceComponent /> {/* use useConsentCategories() hook here */}\n</Modal>\n```\n\n### Vanilla JS / HTML\n```bash\n<script>\n  import { setupCookieConsent, showBanner } from '@darmiuskz/cookie-consent-manager';\n  window.CookieConsent.setupCookieConsent({\n    serverMode: false,\n    categories: {\n      analytics: {\n        label: 'Analytics',\n        description: 'Tracks how users interact with the site',\n        customizable: true,\n        scripts: [\n          {\n            src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX',\n            name: 'Google Tag Manager'\n          },\n        ]\n      }\n    }\n  });\n\n  window.CookieConsent.showBanner({\n    message: \"We use cookies 🍪\",\n    buttons: {\n      customize: \"Customize\"\n    },\n    customizeMode: \"page\",\n    customizePageUrl: \"/cookie-settings\"\n  });\n</script>\n```\n### 🛠️ Custom Modals in Native JS\n```bash\n<script>\nimport { injectCustomModal, getConsentHelpers, getConsentCategories } from 'cookie-consent-manager';\n  const categories = getConsentCategories();\n\n  const html = `\n    <div class=\"my-cookie-modal\">\n      <h2>Cookie Preferences</h2>\n      ${categories.map(cat => `\n        <label>\n          <input type=\"checkbox\" name=\"${cat.key}\" ${cat.checked ? 'checked' : ''} />\n          ${cat.label}\n        </label>\n      `).join('')}\n      <button onclick=\"saveMyConsent()\">Save</button>\n      <button onclick=\"window.CookieConsent.getConsentHelpers().rejectAll()\">Reject All</button>\n    </div>\n  `;\n\n  function saveMyConsent() {\n    const selected = Array.from(document.querySelectorAll('input[type=checkbox]:checked')).map(i => i.name);\n    getConsentHelpers().save(selected);\n    document.querySelector('.my-cookie-modal')?.remove();\n  }\n\n  injectCustomModal(html);\n</script>\n```","readmeFilename":"README.md"}