Product
Introducing Webhook Events for Alert Changes
Add real-time Socket webhook events to your workflows to automatically receive software supply chain alert changes in real time.
By Phil Gates-Idem - Nov 21, 2025
🚀 DAY 5 OF LAUNCH WEEK:Introducing Webhook Events for Alert Changes.Learn more →
react-consent-management-banner
Advanced tools
react-consent-management-banner
Beautiful and Highly Customizable GDPR/ePrivacy React Consent and Cookie Management Library for React and Next.js
🍪 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!
FAQs
Package last updated on 20 Jul 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
ENISA Becomes a CVE Root, Expanding Its Role in Europe’s Vulnerability Ecosystem
ENISA has become a CVE Program Root, giving the EU a central authority for coordinating vulnerability reporting, disclosure, and cross-border response.
By Sarah Gooding - Nov 21, 2025
Product
Introducing Socket Scanning for OpenVSX Extensions
Socket now scans OpenVSX extensions, giving teams early detection of risky behaviors, hidden capabilities, and supply chain threats in developer tools.
By Mix Irving, Ryan Eberhardt - Nov 20, 2025