@mihilista/cookie-consent

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. Wrap Your App with the CookieConsentProvider

In your Next.js layout.tsx file:

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

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

2. 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/>
    </>
  );
}

3. Customize Preferences (Optional)

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

---

🎨 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