react-consent-management-banner
v1.1.19
Published
Beautiful and Highly Customizable GDPR/ePrivacy React Consent and Cookie Management Library for React and Next.js
Maintainers
faraasatKeywords
Readme
🍪 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/index.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/index.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/index.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!