🍪 Advanced Cookie Consent Banner
A fully configurable and lightweight cookie consent banner for React applications. Supports customizable layout, button text, and preference modal with persistent storage in localStorage. Full integration with GTag, Google Analytics and Adsense.
📦 Installation
npm i react-consent-management-banner
yarn add react-consent-management-banner
pnpm i react-consent-management-banner
bun add react-consent-management-banner
⚙️ Demo
Access Demo at: Demo
Banner
Preferences
Integrated with Google Tag Assistant
🚀 Features
- ✅ Accept all cookies or reject non-essential ones
- ⚙️ Fully configurable preference modal
- 📍 Banner position (top / bottom)
- 📌 Settings button position (top-left, top-right, bottom-left, bottom-right)
- 🧠 Smart persistence via localStorage
- 📜 Links to Cookie Policy, Privacy Policy, and Terms
- ✨ Lightweight and easy to style
🧑💻 Usage
For React
import React from "react";
import { CookieConsent } from "react-consent-management-banner";
import "react-consent-management-banner/dist/style.css";
function App() {
return (
<div>
<CookieConsent GA_TRACKING_ID="<YOUR_TRACKING_ID>" />
</div>
);
}
export default App;
For Next.js (Pages Router)
// _app.jsx|tsx
import React from "react";
import type { AppProps } from "next/app";
import { CookieConsent } from "react-consent-management-banner";
import "react-consent-management-banner/dist/style.css";
function MyApp({ Component, pageProps }: AppProps) {
return (
<React.Fragment>
<Component {...pageProps} />
<CookieConsent GA_TRACKING_ID="<YOUR_TRACKING_ID>" />
</React.Fragment>
);
}
export default MyApp;
For Next.js (App Router)
For App Router, we have to first export it from the client component and for this make a new file with any name and do this:
// layout.client.ts
"use client";
import { CookieConsent } from "react-consent-management-banner";
export { CookieConsent };
// layout.jsx|tsx
import React from "react";
import { CookieConsent } from "layout.client.ts";
import "react-consent-management-banner/dist/style.css";
function RootLayout({
children,
}: Readonly<{
children: React.ReactNode,
}>) {
return (
<html lang="en">
<body>
{children}
<CookieConsent GA_TRACKING_ID="<YOUR_TRACKING_ID>" />
</body>
</html>
);
}
export default RootLayout;
🛠 Configuration Options
You can pass a custom config prop to override defaults:
<CookieConsent config={customConfig} GA_TRACKING_ID="<YOUR_TRACKING_ID>" />
🔧 Config object structure
type CookieConsentConfig = {
banner: {
className?: string;
title?: string;
position?: "top" | "bottom";
button: {
acceptAlText?: string;
rejectNonEssentialText?: string;
preferencesText?: string;
};
links: {
cookiePolicy?: IMoreLinks;
privacyPolicy?: IMoreLinks;
terms?: IMoreLinks;
moreLinks?: Array<IMoreLinks>;
};
};
preferences: {
title: string;
para?: string;
className?: string;
button: { savePreferencesText?: string; goBackText?: string };
options: Array<IPreferenceOption>;
};
cookieFloatingButton: {
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
Component: React.JSX.Element | React.JSX.Element[] | React.ReactNode;
show: boolean;
};
backgroundColor: string;
linkColor: string;
buttonBackgroundColor: string;
textColor: string;
onPreferencesChange?: (
preferences: Record<string, boolean>,
consentGiven: boolean
) => void;
getConsentGiven?: () => void;
getConsentPreferences?: () => void;
};
interface IMoreLinks {
title: string;
url: string;
}
🧠 How It Works
- On initial load, if no preferences are stored, the banner is shown.
- Clicking Accept All enables all cookie types.
- Clicking Reject Non-Essentials enables only alwaysEnabled options (e.g., Necessary).
- Preferences are stored in localStorage under the key cookiePreferences.
- A floating settings button appears after consent is given, allowing users to adjust preferences later.
🗂 Local Storage Structure
{
"ad_personalization": true,
"ad_storage": true,
"ad_user_data": true,
"analytics_storage": true,
"functionality_storage": true,
"necessary_storage": true,
"personalization_storage": true,
"security_storage": true
}
Only alwaysEnabled: true options are locked on and non-toggle-able.
❓FAQ
Q: Does this banner block cookies automatically?
A: No, it simply records preferences and send them to the GTag.
Q: Is it compliant with GDPR/CCPA?
A: It provides necessary UX components, but legal compliance depends on how you use stored preferences to enable/disable cookies.
Q: Can I add custom preference categories?
A: Yes!
🧑🎓 Credits
Developed with ❤️ by Farasat Ali
Feedback and contributions welcome!
