{"id":27166775,"url":"https://github.com/hypershiphq/react-cookie-manager","last_synced_at":"2025-04-09T04:02:05.387Z","repository":{"id":275275016,"uuid":"925611547","full_name":"hypershiphq/react-cookie-manager","owner":"hypershiphq","description":"A powerful, customizable React component for cookie consent management with built-in tracking prevention. This component provides a modern, user-friendly way to obtain and manage cookie consent from your website visitors.","archived":false,"fork":false,"pushed_at":"2025-04-03T09:44:37.000Z","size":8974,"stargazers_count":125,"open_issues_count":2,"forks_count":6,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-03T10:34:56.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hypershiphq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-01T09:45:59.000Z","updated_at":"2025-04-02T18:54:47.000Z","dependencies_parsed_at":"2025-02-01T10:51:19.760Z","dependency_job_id":"8b1afe53-532a-4ec5-8291-b31de9ee95f4","html_url":"https://github.com/hypershiphq/react-cookie-manager","commit_stats":null,"previous_names":["hypershiphq/react-cookie-manager"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypershiphq%2Freact-cookie-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypershiphq%2Freact-cookie-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypershiphq%2Freact-cookie-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypershiphq%2Freact-cookie-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypershiphq","download_url":"https://codeload.github.com/hypershiphq/react-cookie-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247974720,"owners_count":21026742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-09T04:02:02.679Z","updated_at":"2025-04-09T04:02:05.320Z","avatar_url":"https://github.com/hypershiphq.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🍪 React Cookie Manager\n\nA powerful, customizable React component for cookie consent management with built-in tracking prevention. This component provides a modern, user-friendly way to obtain and manage cookie consent from your website visitors.\n\n[![React Cookie Manager Hero](https://github.com/hypershiphq/react-cookie-manager/blob/main/assets/github-hero-banner.jpg?raw=true)](https://cookiekit.io)\n\n![React Cookie Manager](https://github.com/hypershiphq/react-cookie-manager/blob/main/assets/react-cookie-manager.gif?raw=true)\n\n## Quick Start\n\nGet up and running quickly with React Cookie Manager:\n\n```bash\nnpm install react-cookie-manager\n# or\nyarn add react-cookie-manager\n```\n\n```jsx\nimport { CookieManager } from \"react-cookie-manager\";\nimport \"react-cookie-manager/style.css\";\n\ncreateRoot(document.getElementById(\"root\")).render(\n  \u003cStrictMode\u003e\n    \u003cCookieManager\u003e\n      \u003cApp /\u003e\n    \u003c/CookieManager\u003e\n  \u003c/StrictMode\u003e\n);\n```\n\nThe CookieManager component needs to wrap your entire application to properly manage cookie consent across all components and pages.\n\n## Contents\n\n- [Quick Start](#quick-start)\n- [Features](#features)\n- [Try it out](#-try-it-out)\n- [CookieKit Integration](#cookiekit-integration)\n- [Automatically Disable Tracking](#automatically-disable-tracking)\n- [Installation](#installation)\n- [Importing Styles](#importing-styles)\n- [Basic Usage](#basic-usage)\n- [Next.js Usage](#nextjs-usage)\n- [Full Usage](#full-usage)\n- [Advanced Usage with Hook](#advanced-usage-with-hook)\n- [Props](#props)\n- [CSS Customization](#css-customization)\n  - [Available classNames](#available-classnames)\n  - [CSS Framework Compatibility](#css-framework-compatibility)\n  - [Element Groups](#element-groups)\n- [Cookie Categories](#cookie-categories)\n- [Hook API](#hook-api)\n- [i18next support](#i18next-support)\n- [Translation Options](#translation-options)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Features\n\n- 🌐 Multiple display types (banner, popup, modal)\n- 🛡️ Automatic tracking prevention (Google Analytics, etc.)\n- 🎬 Smart iframe blocking for embedded content (YouTube, Vimeo, etc.)\n- 🎯 Granular cookie category controls (Analytics, Social, Advertising)\n- 🎨 Light and dark theme support\n- 📱 Responsive design\n- 🔧 Highly customizable UI\n- 💾 Persistent consent storage\n- 🔒 Privacy-first approach\n- 🇪🇺 GDPR compliance with CookieKit.io integration\n- 🍪 Floating cookie button for easy access\n\n## CookieKit Integration\n\nTake your GDPR compliance to the next level with [CookieKit.io](https://cookiekit.io) integration!\n\n### Features\n\n- 📊 Real-time consent analytics dashboard\n- 🔄 Automatic consent proof storage\n- 📈 Advanced user segmentation\n- 🆓 Completely free to use!\n\n### Usage with CookieKit\n\n```jsx\nimport { CookieManager } from \"react-cookie-manager\";\n\nfunction App() {\n  return (\n    \u003cCookieManager\n      cookieKitId=\"\" // Get this from cookiekit.io\n      translations={{\n        title: \"Cookie Preferences\",\n        message: \"We use cookies to improve your experience.\",\n      }}\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/CookieManager\u003e\n  );\n}\n```\n\nWhen `cookieKitId` is provided, React Cookie Manager will automatically:\n\n- Generate and track unique session IDs\n- Send consent events to CookieKit.io\n- Store consent proofs for GDPR compliance\n- Provide analytics data in your CookieKit dashboard\n\nVisit [cookiekit.io](https://cookiekit.io) to get started for free!\n\n## 🎮 Try it out!\n\n### [🔗 Live Demo](https://cookiekit.io/playground)\n\nSee React Cookie Manager in action and explore all its features in our interactive demo.\n\n## Automatically Disable Tracking\n\nUnlike other cookie consent managers and React components, this component automatically disables tracking for Google Analytics, Facebook Pixel, and other tracking services. This is done by blocking the tracking scripts from loading. Therefore, you don't need to manually disable tracking, saving you hours of work.\n\n### Embedded Content Blocking\n\nReact Cookie Manager automatically blocks embedded iframes that would otherwise load cookies without consent, such as:\n\n- YouTube videos\n- Vimeo videos\n- Google Maps\n- Social media embeds (Twitter, Instagram, etc.)\n- Third-party widgets and tools\n\nWhen a user hasn't consented to the required cookies, these embeds are replaced with user-friendly placeholders that:\n\n- Explain why the content is blocked\n- Provide a button to manage cookie settings\n- Inform users to refresh the page after accepting cookies\n- Maintain the same dimensions as the original content\n\nThis ensures your site remains GDPR-compliant while providing a seamless user experience.\n\n## Installation\n\n```bash\nnpm install react-cookie-manager\n# or\nyarn add react-cookie-manager\n```\n\n## Importing Styles\n\nThe component requires its CSS file to be imported in your application. Add the following import to your app's entry point (e.g., `App.tsx` or `index.tsx`):\n\n```javascript\nimport \"react-cookie-manager/style.css\";\n```\n\n![React Cookie Manager Styles](https://github.com/hypershiphq/react-cookie-manager/blob/main/assets/banner-styles.jpg?raw=true)\n\n## Basic Usage\n\n```jsx\nimport { CookieManager } from \"react-cookie-manager\";\nimport \"react-cookie-manager/style.css\";\n\nfunction App() {\n  return (\n    \u003cCookieManager\n      translations={{\n        title: \"Cookie Preferences\",\n        message: \"We use cookies to improve your experience.\",\n      }}\n      onManage={(preferences) =\u003e\n        console.log(\"Cookie preferences:\", preferences)\n      }\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/CookieManager\u003e\n  );\n}\n```\n\n## Next.js Usage\n\nFor Next.js applications, you'll need to use dynamic imports to prevent SSR of the cookie manager:\n\n```tsx\n\"use client\";\n\nimport dynamic from \"next/dynamic\";\n\nconst CookieManager = dynamic(\n  () =\u003e import(\"react-cookie-manager\").then((mod) =\u003e mod.CookieManager),\n  { ssr: false, loading: () =\u003e null }\n);\n\n// In your Providers component or layout\nexport function Providers({ children }: { children: React.ReactNode }) {\n  return (\n    \u003cCookieManager\n      showManageButton={true}\n      translations={{\n        title: \"Cookie Preferences\",\n        message: \"We use cookies to improve your experience.\",\n      }}\n      displayType=\"banner\"\n      theme=\"light\"\n    \u003e\n      {children}\n    \u003c/CookieManager\u003e\n  );\n}\n\n// In your page component\nimport { useCookieConsent } from \"react-cookie-manager\";\n\nexport default function Home() {\n  const { showConsentBanner, detailedConsent } = useCookieConsent();\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={showConsentBanner}\u003eManage Cookie Settings\u003c/button\u003e\n      {detailedConsent \u0026\u0026 (\n        \u003cdiv\u003e\n          Analytics:{\" \"}\n          {detailedConsent.Analytics.consented ? \"Enabled\" : \"Disabled\"}\n          Social: {detailedConsent.Social.consented ? \"Enabled\" : \"Disabled\"}\n          Advertising:{\" \"}\n          {detailedConsent.Advertising.consented ? \"Enabled\" : \"Disabled\"}\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Full Usage\n\n```jsx\nimport { CookieManager } from \"react-cookie-manager\";\nimport \"react-cookie-manager/style.css\";\n\nfunction App() {\n  return (\n    \u003cCookieManager\n      translations={{\n        title: \"Would You Like A Cookie? 🍪\",\n        message:\n          \"We value your privacy. Choose which cookies you want to allow. Essential cookies are always enabled as they are necessary for the website to function properly.\",\n        buttonText: \"Accept All\",\n        declineButtonText: \"Decline All\",\n        manageButtonText: \"Manage Cookies\",\n        privacyPolicyText: \"Privacy Policy\",\n      }}\n      showManageButton={true}\n      privacyPolicyUrl=\"https://example.com/privacy\"\n      theme=\"light\"\n      displayType=\"popup\"\n      cookieKitId=\"\" // Optional: Enable CookieKit.io integration\n      onManage={(preferences) =\u003e {\n        if (preferences) {\n          console.log(\"Cookie preferences updated:\", preferences);\n        }\n      }}\n      onAccept={() =\u003e {\n        console.log(\"User accepted all cookies\");\n        // Analytics tracking can be initialized here\n      }}\n      onDecline={() =\u003e {\n        console.log(\"User declined all cookies\");\n        // Handle declined state if needed\n      }}\n    \u003e\n      \u003cAppContent /\u003e\n    \u003c/CookieManager\u003e\n  );\n}\n```\n\n## Advanced Usage with Hook\n\n```jsx\nimport { CookieManager, useCookieConsent } from \"react-cookie-manager\";\n\nfunction CookieSettings() {\n  const { showConsentBanner, detailedConsent } = useCookieConsent();\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={showConsentBanner}\u003eManage Cookie Settings\u003c/button\u003e\n      {detailedConsent \u0026\u0026 (\n        \u003cdiv\u003e\n          Analytics:{\" \"}\n          {detailedConsent.Analytics.consented ? \"Enabled\" : \"Disabled\"}\n          Social: {detailedConsent.Social.consented ? \"Enabled\" : \"Disabled\"}\n          Advertising:{\" \"}\n          {detailedConsent.Advertising.consented ? \"Enabled\" : \"Disabled\"}\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n## Floating Cookie Button\n\nThe floating cookie button provides a persistent, accessible way for users to manage their cookie preferences after they've made their initial choice. It appears as a small, animated cookie icon in the bottom-left corner of the screen.\n\n### Enabling the Floating Button\n\n```jsx\n\u003cCookieManager\n  enableFloatingButton={true}\n  theme=\"light\" // or \"dark\"\n  // ... other props\n\u003e\n  \u003cYourApp /\u003e\n\u003c/CookieManager\u003e\n```\n\n### Features\n\n- 🎯 Automatically appears after initial consent\n- 🎨 Matches your theme (light/dark mode)\n- 🔄 Smooth animations and hover effects\n- ❌ Dismissible with a close button\n- 📱 Responsive and mobile-friendly\n- 🎛️ Easy access to cookie preferences\n\n### Behavior\n\n1. The button appears after users make their initial cookie choice\n2. Hovering reveals a close button to dismiss the floating button\n3. Clicking opens the cookie preferences modal\n4. The button remains hidden until page refresh after being closed\n5. Maintains position during scroll\n\n### Customization\n\nThe floating button automatically adapts to your chosen theme:\n\n```jsx\n// Light theme (default)\n\u003cCookieManager\n  enableFloatingButton={true}\n  theme=\"light\"\n\u003e\n  \u003cYourApp /\u003e\n\u003c/CookieManager\u003e\n\n// Dark theme\n\u003cCookieManager\n  enableFloatingButton={true}\n  theme=\"dark\"\n\u003e\n  \u003cYourApp /\u003e\n\u003c/CookieManager\u003e\n```\n\nThe button inherits your color scheme:\n\n- Light theme: White background with gray text\n- Dark theme: Black background with light gray text\n\n### Accessibility\n\nThe floating button is fully accessible:\n\n- Proper ARIA labels\n- Keyboard navigation support\n- Focus management\n- High contrast ratios\n- Screen reader friendly\n\n## Props\n\n| Prop                       | Type                                     | Default          | Description                               |\n| -------------------------- | ---------------------------------------- | ---------------- | ----------------------------------------- |\n| `children`                 | React.ReactNode                          | -                | Your app components                       |\n| `translations`             | TranslationObject \\| TranslationFunction | -                | Translation object or i18n TFunction      |\n| `translationI18NextPrefix` | string                                   | -                | i18next key prefix, e.g. \"cookies.\"       |\n| `showManageButton`         | boolean                                  | false            | Whether to show the manage cookies button |\n| `enableFloatingButton`     | boolean                                  | false            | Enable floating cookie button             |\n| `privacyPolicyUrl`         | string                                   | -                | URL for the privacy policy                |\n| `cookieKey`                | string                                   | 'cookie-consent' | Name of the cookie to store consent       |\n| `cookieExpiration`         | number                                   | 365              | Days until cookie expires                 |\n| `displayType`              | 'banner' \\| 'popup' \\| 'modal'           | 'banner'         | How the consent UI is displayed           |\n| `position`                 | 'top' \\| 'bottom'                        | 'bottom'         | Position of the banner                    |\n| `theme`                    | 'light' \\| 'dark'                        | 'light'          | Color theme                               |\n| `disableAutomaticBlocking` | boolean                                  | false            | Disable automatic tracking prevention     |\n| `blockedDomains`           | string[]                                 | []               | Additional domains to block               |\n| `cookieKitId`              | string                                   | undefined        | Your CookieKit.io integration ID          |\n| `onManage`                 | (preferences?: CookieCategories) =\u003e void | -                | Callback when preferences are updated     |\n| `onAccept`                 | () =\u003e void                               | -                | Callback when all cookies are accepted    |\n| `onDecline`                | () =\u003e void                               | -                | Callback when all cookies are declined    |\n| `classNames`               | CookieConsenterClassNames                | -                | Custom class names for styling            |\n\n## CSS Customization\n\nReact Cookie Manager provides extensive styling customization through the `classNames` prop. You can override the default styling for each element of the cookie consent UI.\n\n### Available classNames\n\n```tsx\n\u003cCookieManager\n  classNames={{\n    // Main action buttons\n    acceptButton:\n      \"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg\",\n    declineButton:\n      \"bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg\",\n    manageButton:\n      \"border-2 border-blue-500 text-blue-500 font-bold py-2 px-4 rounded-lg hover:bg-blue-50\",\n\n    // Banner style (bottom of screen)\n    bannerContainer:\n      \"bg-white/90 border-2 border-blue-200 shadow-xl rounded-xl\",\n    bannerContent: \"p-6 space-y-4\",\n    bannerTitle: \"text-lg font-bold text-blue-800\",\n    bannerMessage: \"text-sm text-gray-700\",\n\n    // Popup style (bottom left corner)\n    popupContainer: \"bg-white/90 border-2 border-blue-200 shadow-xl rounded-xl\",\n    popupContent: \"p-6 space-y-4\",\n    popupTitle: \"text-lg font-bold text-blue-800\",\n    popupMessage: \"text-sm text-gray-700\",\n\n    // Modal style (center of screen)\n    modalContainer: \"bg-black/50 backdrop-blur-sm\",\n    modalContent: \"bg-white p-8 rounded-xl max-w-lg mx-auto\",\n    modalTitle: \"text-xl font-bold text-gray-900\",\n    modalMessage: \"text-gray-600 my-4\",\n\n    // Floating cookie button (appears after consent is given)\n    floatingButton: \"bg-blue-500 text-white shadow-lg hover:bg-blue-600\",\n    floatingButtonCloseButton: \"bg-red-500 text-white\",\n\n    // Manage Cookie UI elements\n    manageCookieContainer: \"space-y-6\",\n    manageCookieTitle: \"text-xl font-bold text-blue-800\",\n    manageCookieMessage: \"text-gray-700\",\n    manageCookieCategory: \"border-b border-gray-200 pb-4\",\n    manageCookieCategoryTitle: \"font-bold text-gray-800\",\n    manageCookieCategorySubtitle: \"text-gray-600\",\n    manageCookieStatusText: \"text-xs text-gray-500 italic\",\n    manageCookieToggle: \"bg-gray-300\",\n    manageCookieToggleChecked: \"bg-green-500\",\n    manageCancelButton:\n      \"bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded\",\n    manageSaveButton:\n      \"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded\",\n\n    // Other elements\n    privacyPolicyLink: \"text-blue-600 underline hover:text-blue-800\",\n    poweredByLink: \"text-gray-400 hover:text-gray-600\",\n  }}\n\u003e\n  {children}\n\u003c/CookieManager\u003e\n```\n\n### CSS Framework Compatibility\n\nThe `classNames` prop is compatible with any CSS framework. Here are some examples:\n\n#### Tailwind CSS\n\n```tsx\n\u003cCookieManager\n  classNames={{\n    acceptButton:\n      \"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded\",\n    declineButton:\n      \"bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded\",\n    bannerContainer: \"bg-white shadow-lg rounded-lg border border-gray-200\",\n  }}\n\u003e\n  {children}\n\u003c/CookieManager\u003e\n```\n\n#### Bootstrap\n\n```tsx\n\u003cCookieManager\n  classNames={{\n    acceptButton: \"btn btn-success\",\n    declineButton: \"btn btn-danger\",\n    manageButton: \"btn btn-outline-primary\",\n    bannerContainer: \"card\",\n    bannerContent: \"card-body\",\n    bannerTitle: \"card-title\",\n    bannerMessage: \"card-text\",\n  }}\n\u003e\n  {children}\n\u003c/CookieManager\u003e\n```\n\n### Element Groups\n\nThe classNames are organized by component type:\n\n#### Button Elements\n\n- `acceptButton`: Style for the Accept/Allow cookies button\n- `declineButton`: Style for the Decline/Reject cookies button\n- `manageButton`: Style for the Manage Cookies button\n- `manageCancelButton`: Style for the Cancel button in the manage preferences view\n- `manageSaveButton`: Style for the Save Preferences button\n\n#### Container Elements\n\n- `bannerContainer`: Main container for the banner-style consent UI\n- `popupContainer`: Main container for the popup-style consent UI\n- `modalContainer`: Main container for the modal-style consent UI\n- `manageCookieContainer`: Container for the manage preferences UI\n\n#### Content Elements\n\n- `bannerContent`, `popupContent`, `modalContent`: Content containers for each display type\n- `bannerTitle`, `popupTitle`, `modalTitle`: Title elements for each display type\n- `bannerMessage`, `popupMessage`, `modalMessage`: Message elements for each display type\n\n#### Manage Cookie UI Elements\n\n- `manageCookieTitle`: Title for the manage cookie preferences UI\n- `manageCookieMessage`: Description text in the manage preferences UI\n- `manageCookieCategory`: Container for each cookie category\n- `manageCookieCategoryTitle`: Title for each cookie category\n- `manageCookieCategorySubtitle`: Description for each cookie category\n- `manageCookieStatusText`: Status text showing consent status and date\n- `manageCookieToggle`: Toggle switch for cookie categories\n- `manageCookieToggleChecked`: Style applied to the toggle when checked\n\n#### Other Elements\n\n- `privacyPolicyLink`: Style for the privacy policy link\n- `floatingButton`: Style for the floating cookie button\n- `floatingButtonCloseButton`: Style for the close button on the floating cookie button\n- `poweredByLink`: Style for the \"Powered by CookieKit\" link\n\n## Cookie Categories\n\nThe component manages three categories of cookies:\n\n```typescript\ninterface CookieCategories {\n  Analytics: boolean;\n  Social: boolean;\n  Advertising: boolean;\n}\n```\n\n## Hook API\n\nThe `useCookieConsent` hook provides the following:\n\n```typescript\ninterface CookieConsentHook {\n  hasConsent: boolean | null;\n  isDeclined: boolean;\n  detailedConsent: DetailedCookieConsent | null;\n  showConsentBanner: () =\u003e void;\n  acceptCookies: () =\u003e void;\n  declineCookies: () =\u003e void;\n  updateDetailedConsent: (preferences: CookieCategories) =\u003e void;\n}\n```\n\n## Event Callbacks\n\nThe CookieManager component provides callback props that allow you to respond to user interactions with the consent UI:\n\n| Callback    | Triggered when                       | Parameters                       |\n| ----------- | ------------------------------------ | -------------------------------- |\n| `onAccept`  | User accepts all cookies             | None                             |\n| `onDecline` | User declines all cookies            | None                             |\n| `onManage`  | User saves custom cookie preferences | `preferences?: CookieCategories` |\n\n### Usage Example\n\n```jsx\n\u003cCookieManager\n  onAccept={() =\u003e {\n    console.log(\"All cookies accepted\");\n    // Initialize analytics tools\n    window.gtag?.(\"consent\", \"update\", { analytics_storage: \"granted\" });\n  }}\n  onDecline={() =\u003e {\n    console.log(\"All cookies declined\");\n    // Ensure tracking is disabled\n    window.gtag?.(\"consent\", \"update\", { analytics_storage: \"denied\" });\n  }}\n  onManage={(preferences) =\u003e {\n    console.log(\"Custom preferences saved:\", preferences);\n    // Handle granular consent\n    if (preferences?.Analytics) {\n      // Enable analytics\n    }\n    if (preferences?.Advertising) {\n      // Enable ad personalization\n    }\n  }}\n\u003e\n  {children}\n\u003c/CookieManager\u003e\n```\n\n### Common Use Cases\n\n- **Analytics Initialization**: Only initialize tracking tools after receiving explicit consent\n- **Ad Personalization**: Enable or disable personalized advertising based on user preferences\n- **Social Media Integration**: Load social widgets only when Social cookies are accepted\n- **Consent Logging**: Record user consent choices for compliance purposes\n- **UI Updates**: Update the UI based on user consent status (e.g., showing alternative content)\n\n## i18next support\n\n```typescript\nimport { default as i18next } from \"i18next\";\n\nfunction App() {\n  return (\n    \u003cCookieManager\n      translations={i18next.t}\n      translationI18NextPrefix=\"cookies.\"\n      ...\n      /\u003e\n  )\n}\n```\n\n```json\n// en.json\n{\n  \"cookies\": {\n    \"title\": \"Would You Like A Cookie? 🍪\",\n    \"message\": \"We value your privacy. Choose which cookies you want to allow. Essential cookies are always enabled as they are necessary for the website to function properly.\",\n    \"buttonText\": \"Accept All\",\n    \"declineButtonText\": \"Decline All\",\n    \"manageButtonText\": \"Manage Cookies\",\n    \"privacyPolicyText\": \"Privacy Policy\"\n  }\n  //...\n}\n```\n\n## Translation Options\n\nAll available translation keys and their default values:\n\n```typescript\n{\n  // Main consent banner/popup/modal\n  title: \"\",  // Optional title\n  message: \"This website uses cookies to enhance your experience.\",\n  buttonText: \"Accept\",\n  declineButtonText: \"Decline\",\n  manageButtonText: \"Manage Cookies\",\n  privacyPolicyText: \"Privacy Policy\",\n\n  // Manage consent modal\n  manageTitle: \"Cookie Preferences\",\n  manageMessage: \"Manage your cookie preferences below. Essential cookies are always enabled as they are necessary for the website to function properly.\",\n\n  // Essential cookies section\n  manageEssentialTitle: \"Essential\",\n  manageEssentialSubtitle: \"Required for the website to function properly\",\n  manageEssentialStatus: \"Status: Always enabled\",\n  manageEssentialStatusButtonText: \"Always On\",\n\n  // Analytics cookies section\n  manageAnalyticsTitle: \"Analytics\",\n  manageAnalyticsSubtitle: \"Help us understand how visitors interact with our website\",\n\n  // Social cookies section\n  manageSocialTitle: \"Social\",\n  manageSocialSubtitle: \"Enable social media features and sharing\",\n\n  // Advertising cookies section\n  manageAdvertTitle: \"Advertising\",\n  manageAdvertSubtitle: \"Personalize advertisements and measure their performance\",\n\n  // Status messages\n  manageCookiesStatus: \"Status: {{status}} on {{date}}\", // Supports variables\n  manageCookiesStatusConsented: \"Consented\",\n  manageCookiesStatusDeclined: \"Declined\",\n\n  // Buttons in manage modal\n  manageCancelButtonText: \"Cancel\",\n  manageSaveButtonText: \"Save Preferences\"\n}\n```\n\nYou can override any of these translations by passing them in the `translations` prop:\n\n```jsx\n\u003cCookieManager\n  translations={{\n    title: \"Cookie Settings 🍪\",\n    message: \"We use cookies to improve your experience.\",\n    buttonText: \"Allow All\",\n    manageButtonText: \"Customize\",\n    // ... override any other translations\n  }}\n\u003e\n  \u003cApp /\u003e\n\u003c/CookieManager\u003e\n```\n\n### i18next Integration\n\nWhen using i18next, make sure your translation files include all the keys under your chosen prefix:\n\n```json\n{\n  \"cookies\": {\n    \"title\": \"Cookie Settings 🍪\",\n    \"message\": \"We use cookies to improve your experience.\",\n    \"buttonText\": \"Allow All\",\n    \"declineButtonText\": \"Decline All\",\n    \"manageButtonText\": \"Customize\",\n    \"privacyPolicyText\": \"Privacy Policy\",\n    \"manageTitle\": \"Cookie Preferences\",\n    \"manageMessage\": \"Customize your cookie preferences below...\",\n    \"manageEssentialTitle\": \"Essential Cookies\"\n    // ... include all other translation keys\n  }\n}\n```\n\nThen use it with the i18next translation function:\n\n```jsx\nimport { useTranslation } from \"react-i18next\";\n\nfunction App() {\n  const { t } = useTranslation();\n\n  return (\n    \u003cCookieManager translations={t} translationI18NextPrefix=\"cookies.\"\u003e\n      \u003cYourApp /\u003e\n    \u003c/CookieManager\u003e\n  );\n}\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT © Hypership\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypershiphq%2Freact-cookie-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypershiphq%2Freact-cookie-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypershiphq%2Freact-cookie-manager/lists"}