react-consent-management-banner
Version:
Beautiful and Highly Customizable GDPR/ePrivacy React Consent and Cookie Management Library for React and Next.js
243 lines (179 loc) • 6.68 kB
Markdown
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.
[](https://www.jsdelivr.com/package/npm/react-consent-management-banner)
[](https://standardjs.com)
[]: https://img.shields.io/npm/dm/react-consent-management-banner.svg
[]: https://npmjs.org/package/react-consent-management-banner
[](https://npmjs.org/package/react-consent-management-banner)
```bash
npm i react-consent-management-banner
yarn add react-consent-management-banner
pnpm i react-consent-management-banner
bun add react-consent-management-banner
```
Access Demo at: [Demo](https://react-consent-management-banner.vercel.app/)
- ✅ 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
```jsx
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;
```
```jsx
// _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 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:
```jsx
// layout.client.ts
"use client";
import { CookieConsent } from "react-consent-management-banner";
export { CookieConsent };
```
```jsx
// 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;
```
You can pass a custom config prop to override defaults:
```jsx
<CookieConsent config={customConfig} GA_TRACKING_ID="<YOUR_TRACKING_ID>" />
```
```ts
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 preferences later.
## 🗂 Local Storage Structure
```json
{
"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](https://github.com/faraasat)**
Feedback and contributions welcome!