HeroUI Cookie Consent

A modern, customizable cookie consent component for React 19 and HeroUI.

Features

• 🚀 Built for React 19 and HeroUI v2
• 🌐 Internationalization support with react-i18next
• 🌙 Dark/Light mode compatibility
• 📱 Responsive design
• 🎨 Customizable styling and placement
• 📦 Small bundle size

Installation

npm install heroui-cookie-consent

Requirements

This package has peer dependencies on:

• React >= 19.0.0
• HeroUI v2 (beta for React 19 support)
• react-i18next >= 15.0.0
• i18next >= 24.0.0

Basic Usage

import React from 'react';
import ReactDOM from 'react-dom/client';
import { CookieConsentProvider, CookieConsent } from 'heroui-cookie-consent';
import { Provider as HeroUIProvider } from './your-heroui-provider'; // Import your HeroUI provider

// Setup i18next with your configuration (optional)
import './i18n';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HeroUIProvider>
      <CookieConsentProvider>
        <CookieConsent />
        <App />
      </CookieConsentProvider>
    </HeroUIProvider>
  </React.StrictMode>
);

Advanced Usage

Customization Options

<CookieConsent 
  needCookieConsent={true} // Set to false to disable the consent popup
  cookiePolicyUrl="/privacy-policy" // URL to your cookie policy page
  modalPlacement="bottom" // "bottom", "top", or "center"
/>

Custom Handlers

<CookieConsentProvider
  onAccept={() => {
    // Initialize analytics services here
    console.log('Cookies accepted');
  }}
  onReject={() => {
    // Handle cookie rejection
    console.log('Cookies rejected');
  }}
  localStorageKey="my-app-cookie-consent" // Custom localStorage key
>
  <CookieConsent />
  <App />
</CookieConsentProvider>

Using Cookie Consent Status in Components

import { useCookieConsent } from 'heroui-cookie-consent';
import { useEffect } from 'react';

function AnalyticsComponent() {
  const { cookieConsent, resetCookieConsent } = useCookieConsent();
  
  useEffect(() => {
    if (cookieConsent === 'accepted') {
      // Initialize analytics
      console.log('Loading analytics...');
    }
  }, [cookieConsent]);
  
  return (
    <div>
      <p>Cookie consent status: {cookieConsent}</p>
      <button onClick={resetCookieConsent}>Reset Cookie Consent</button>
    </div>
  );
}

Internationalization

The component automatically looks for these translation keys:

{
  "cookie-consent": "We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking <strong className=\"font-semibold\">\"Accept All\"</strong>, you consent to the use of ALL the cookies. Please read our",
  "cookie-policy": "Cookie Policy.",
  "accept-all": "Accept All",
  "reject": "Reject",
  "cookie-consent-title": "Cookies policy"
}

If these keys are present in your i18next setup, they'll be used for translations. Otherwise, the component falls back to the English defaults.

Adding to your i18n files

Example with English and French:

// en.json
{
  "cookie-consent": "We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking <strong className=\"font-semibold\">\"Accept All\"</strong>, you consent to the use of ALL the cookies. Please read our",
  "cookie-policy": "Cookie Policy.",
  "accept-all": "Accept All",
  "reject": "Reject",
  "cookie-consent-title": "Cookies policy"
}

// fr.json
{
  "cookie-consent": "Nous utilisons des cookies sur notre site Web pour vous offrir l'expérience la plus pertinente en nous souvenant de vos préférences et de vos visites répétées. En cliquant sur <strong className=\"font-semibold\">\"Tout accepter\"</strong>, vous consentez à l'utilisation de TOUS les cookies. Veuillez lire notre",
  "cookie-policy": "Politique de cookies.",
  "accept-all": "Tout accepter",
  "reject": "Refuser",
  "cookie-consent-title": "Politique de cookies"
}

Props Reference

CookieConsent Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | needCookieConsent | boolean | true | Whether to show the cookie consent modal | | cookiePolicyUrl | string | "#" | URL to your cookie policy page | | modalPlacement | "bottom" | "top" | "center" | "bottom" | Position of the modal on the screen |

CookieConsentProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Child components | | onAccept | () => void | undefined | Function called when cookies are accepted | | onReject | () => void | undefined | Function called when cookies are rejected | | localStorageKey | string | "cookie-consent-status" | Key used for localStorage |

License

MIT © Ronan LE MEILLAT