Next.js Cookie Consent Manager 🍪

A reusable cookie consent manager designed specifically for Next.js projects. This package provides a flexible, developer-friendly solution for managing cookie consent, with pre-defined categories and the ability to extend it with custom categories and themes in the future. 🚀

✨ Features

• Dynamic Cookie Categories: Pre-configured for analytics, marketing, and functional cookies.
• Ready for Next.js: Built with Next.js best practices in mind.
• Customizable: Future-ready for custom categories and themes.
• Lightweight and Flexible: Easy to integrate and adapt to your needs.

📦 Installation

Install the package using npm:

npm install @mihilista/cookie-consent

or with Yarn:

yarn add @mihilista/cookie-consent

🛠️ Usage

1. Import Styles (Optional)

The package provides default styles that you can import, or you can skip this and use your own custom CSS:

// Option A: Use default styles
import '@mihilista/cookie-consent/styles';

// Option B: Skip the import above and use your own custom CSS
// The components use CSS classes with the 'cc--' prefix

2. Wrap Your App with the CookieConsentProvider

In your Next.js layout.tsx file:

import '@mihilista/cookie-consent/styles'; // Optional
import { CookieConsentProvider } from "@mihilista/cookie-consent";

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return <CookieConsentProvider>{children}</CookieConsentProvider>;
}

3. Add Cookie Components

Add the CookieBanner, CookiePreferencesModal, and CookiePreferencesLink

In a shared component or directly in your pages (or layout):

import { CookieBanner, CookiePreferencesModal, CookiePreferencesLink } from "@mihilista/cookie-consent";

export default function CookieConsent() {
  return (
    <>
      <CookieBanner />
      <CookiePreferencesModal />
      <CookiePreferencesLink/>
    </>
  );
}

4. Customize Preferences (Optional)

The package comes with three default categories (functional, analytics, and marketing), but you can customize them in future updates.

🎨 Styling

The package offers flexible styling options:

Option 1: Default Styles

Import the pre-built styles for a quick start:

import '@mihilista/cookie-consent/styles';

Option 2: Custom Styles

Skip the default styles import and create your own CSS. All components use the cc-- prefix for their CSS classes:

• Banner: .cc--banner, .cc--banner__content, .cc--banner__buttons
• Modal: .cc--modal, .cc--modal__overlay, .cc--modal__content
• Buttons: .cc--button, .cc--button--primary, .cc--button--secondary

Reference the source files for the complete class list:

• src/styles/banner.css
• src/styles/modal.css
• src/styles/global.css

Option 3: Hybrid Approach

Import default styles and override specific properties:

import '@mihilista/cookie-consent/styles';
import './my-cookie-overrides.css';

/* my-cookie-overrides.css */
.cc--banner {
  background: #your-brand-color;
}

.cc--button--primary {
  background: #your-accent-color;
}

🎨 Example

Here’s how it looks out of the box:

• Banner: A simple, responsive banner at the bottom of the screen.
• Preferences Modal: A fully accessible modal for managing cookie preferences.
• Preferences Modal Button: A button to show preferences modal after accepting/rejecting the cookies.

🛡️ GDPR Compliance

This package includes features like:

• Consent storage via cookies.
• Options to accept, reject, or customize preferences.
• Support for required cookies (e.g., functional cookies).

Make sure to consult a legal expert to ensure full compliance with local regulations.

🚧 Roadmap

• Add support for custom categories.
• Introduce themes and positioning.
• Add multi-language support.

🌟 Credits

This package was crafted with care, a touch of passion, and a sprinkle of AI magic. It’s the result of a collaborative effort between Mihi and Astra, an AI assistant who’s always ready to lend a helping hand. ❤️

📊 Show Some Love!

If you find this package helpful, I’d love to hear about it! Share your feedback, feature requests, or even your project milestones with me. And hey, if you feel like dropping a ⭐ on GitHub, I won’t complain! 😉

🔗 Links

• GitHub Repository
• NPM Package