react-cookie-consent-banner

React Cookie Consent Banner

A customizable, lightweight cookie consent banner component for React applications. This package provides a simple way to add GDPR-compliant cookie consent functionality to your website.

Features

• 🎨 Fully customizable appearance
• 🌐 Multilingual support (English and Arabic included)
• 📱 Responsive design
• 🔄 RTL support
• 🪝 React hook for accessing consent status
• ⚡ Lightweight with minimal dependencies

Installation

npm install react-cookie-consent-banner
# or
yarn add react-cookie-consent-banner
# or
pnpm add react-cookie-consent-banner

Usage

Basic Usage

import { CookieConsent } from "react-cookie-consent-banner";

function App() {
  return (
    <div>
      <h1>My Website</h1>
      {/* The cookie consent banner will appear automatically on first visit */}
      <CookieConsent />
    </div>
  );
}

Customization

import { CookieConsent } from "react-cookie-consent-banner";

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <CookieConsent
        primaryColor="#4f46e5"
        backgroundColor="#f8fafc"
        textColor="#334155"
        buttonHeight={36}
        position="bottom"
        language="en"
        onAccept={() => console.log("Cookies accepted")}
        onDecline={() => console.log("Cookies declined")}
      />
    </div>
  );
}

Using the Hook

import { useCookieConsent } from "react-cookie-consent-banner";

function CookieStatus() {
  const { consentStatus, isLoaded, hasConsent, needsConsent, hasDeclined } =
    useCookieConsent();

  if (!isLoaded) {
    return <p>Loading cookie consent status...</p>;
  }

  if (needsConsent) {
    return <p>Please accept or decline cookies</p>;
  }

  if (hasConsent) {
    return <p>Thank you for accepting cookies!</p>;
  }

  if (hasDeclined) {
    return <p>You have declined cookies.</p>;
  }
}

Props

Prop	Type	Default	Description
primaryColor	string	"#0070f3"	Primary color for buttons and accents
backgroundColor	string	"#ffffff"	Background color of the banner
textColor	string	"#000000"	Text color
buttonHeight	number	40	Button height in pixels
position	"top" | "bottom"	"bottom"	Position of the banner
language	"en" | "ar"	"en"	Current language
onAccept	function	-	Custom accept callback
onDecline	function	-	Custom decline callback
translations	object	see below	Custom translations
className	string	-	Custom CSS class name
closeIcon	ReactNode	-	Custom close icon component

Default Translations

const defaultTranslations = {
  en: {
    title: "Cookie Consent",
    description:
      'We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.',
    acceptButton: "Accept All",
    declineButton: "Decline",
  },
  ar: {
    title: "موافقة ملفات تعريف الارتباط",
    description:
      'نستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح الخاصة بك، وتقديم إعلانات أو محتوى مخصص، وتحليل حركة المرور لدينا. بالنقر فوق "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط.',
    acceptButton: "قبول الكل",
    declineButton: "رفض",
  },
};

License

MIT