A fully configurable and lightweight cookie consent banner for React applic 8000 ations. Supports customizable layout, button text, and preference modal with persistent storage in localStorage. Full integration with GTag, Google Analytics and Adsense.
npm i react-consent-management-banner
yarn add react-consent-management-banner
pnpm i react-consent-management-banner
bun add react-consent-management-bannerAccess Demo at: Demo
- ✅ 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
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;// _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 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;You can pass a custom config prop to override defaults:
<CookieConsent config={customConfig} GA_TRACKING_ID="<YOUR_TRACKING_ID>" />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;
}- 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 p 86DE references later.
{
"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.
A: No, it simply records preferences and send them to the GTag.
A: It provides necessary UX components, but legal compliance depends on how you use stored preferences to enable/disable cookies.
A: Yes!
Developed with ❤️ by Farasat Ali Feedback and contributions welcome!