cookie-consent-react

Customizable, localized cookie consent component for React.

Built for lightweight, flexible cookie consent management in React applications.

Fully typed with TypeScript support.

Compatible with Next.js and other React frameworks.

Update: May 31, 2026

Version: 1.2.8

Changes:

• numerous visual bugs were resolved
• the prop 'modalIsOpen' has been renamed to 'componentIsOpen'
• the README has been updated; example gifs have been added

Examples

Installation

npm install --save cookie-consent-react

or

yarn add cookie-consent-react

or

pnpm add cookie-consent-react

Usage

Pass selected configuration and consent handlers into the component to configure cookie consent behavior.

"use client";

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

const analyticsHandler = () => {
  console.log("Analytics enabled");
};

const handleAcceptAll = () => {
  console.log("All cookies accepted");
};

const handleAcceptSelection = () => {
  console.log("Selected cookies accepted");
};

export default function CookieConsentProvider() {
  return (
    <CookieConsent
      mode="banner"
      categoriesListStyle="checkboxes"
      handlerFunctions={[
        {
          category: "analytics",
          function: analyticsHandler,
        },
      ]}
      onAcceptAll={(accept) => {
        handleAcceptAll();
        accept();
      }}
      onAcceptSelection={(accept) => {
        handleAcceptSelection();
        accept();
      }}
      privacyPolicyUrl="/privacy-policy"
    />
  );
}

tags, snippets & handlerFunctions

The component includes four default cookie categories:

| Category | Description | |---|---| | essential | Required cookies necessary for application functionality. | | marketing | Advertising, remarketing, and marketing-related cookies. | | analytics | Analytics and performance tracking cookies. | | other | Additional uncategorized cookies. |

All tags, snippets, and handlerFunctions must be assigned to one of these categories.

tags

Use tags for rendering React components after consent is granted for their assigned category.

Example:

<CookieConsent
  mode="banner"
  tags={[
    {
      category: "marketing",
      tag: <GoogleTagManager gtmId="GTM-XXXXXXX" />,
    },
  ]}
/>

snippets

Use snippets for rendering raw JSX/HTML snippets after consent is granted for their assigned category.

Example:

<CookieConsent
  mode="banner"
  snippets={[
    {
      category: "marketing",
      snippet: (
        <iframe
          src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
          height="0"
          width="0"
          style={{
            visibility: "hidden",
            display: "none",
          }}
        />
      ),
    },
  ]}
/>

handlerFunctions

Use handlerFunctions for runtime side effects and initialization logic after consent is granted for their assigned category.

Handler functions execute:

• whenever the component mounts and consent already exists
• whenever consent preferences are updated and saved

Example:

const analyticsHandler = () => {
  console.log("Analytics initialized");
};

<CookieConsent
  mode="banner"
  handlerFunctions={[
    {
      category: "analytics",
      function: analyticsHandler,
    },
  ]}
/>

Documentation

| Prop | Type | Description | Default | |---|---|---|---| | mode* | "modal" | "banner" | Determines component display mode. *Required. | — | | tags | {category: "essential" \| "marketing" \| "analytics" \| "other"; tag: JSX.Element }[] | React components rendered after consent is granted for their category. | — | | snippets | {category: "essential" \| "marketing" \| "analytics" \| "other"; snippet: JSX.Element }[] | Raw JSX/HTML snippets rendered after consent is granted for their category. | — | | handlerFunctions | {category: "essential" \| "marketing" \| "analytics" \| "other"; function: () => void }[] | Runtime callbacks executed when consent exists or changes. | — | | categorySettings | { [K in CookieConsentCategory]?: { required?: boolean; label?: string; } } | Customize category labels and required categories. |{ essential: { required: true } }| | categoriesListStyle | "hide" | "checkboxes" | "switches" | Determines how categories are displayed in the UI. | "checkboxes" | | onAcceptAll | (defaultHandler: () => void) => void | Callback executed when all categories are accepted. | — | | onAcceptSelection | (defaultHandler: () => void) => void | Callback executed when selected categories are saved. | — | | onDeclineAll | (defaultHandler: () => void) => void | Callback executed when optional categories are declined. | — | | privacyPolicyUrl | string | URL to the application's privacy policy. | — | | customStorageKey | string | Custom storage key used for persisted consent data. | By default this value is empty; however a default key "cookie-consent" is used instead if this isn't defined. | | componentIsOpen | boolean | Controls modal visibility. | Handled by boolean type internal state which is set to true on render if there aren't any saved settings in localStorage for current storageKey | | customColors | Partial<typeof { primary: "#0070f3", lightPrimary: "#eaeaea", lightSecondary: "#d0d0d0", textPrimary: "#333333", textSecondary: "#666666", background: "#ffffff", backgroundOff: "#f9f9f9", overlay: "rgba(0, 0, 0, 0.5)", shadow: "rgba(0, 0, 0, 0.15)" }> | Override default component colors. | - | | customFontFamily | string | Custom font family used throughout the component. | System font | | language | "en" \| "de" \| "es" \| "fr" \| "it" \| "nl" \| "pt" \| "ja" \| "zh" \| "ar" \| "ru" \| "ko" \| "pl"\| string | Active localization language. | "en" | | customLocales | { "en" \| "de" \| "es" \| "fr" \| "it" \| "nl" \| "pt" \| "ja" \| "zh" \| "ar" \| "ru" \| "ko" \| "pl"\| string : Partial<{ title: string; description: string; required: string; privacyPolicyInfo: string; privacyPolicy: string; acceptAll: string; SaveSelection: string; disableAll: string; cookiePreferences_show: string; cookiePreferences_hide: string; categories: string; essential: string; marketing: string; analytics: string; other: string; }> \| undefined; } | Custom translation overrides. | — |

Built-in Languages

Built-in translations are available for:

• English (en)
• German (de)
• Spanish (es)
• French (fr)
• Italian (it)
• Dutch (nl)
• Portuguese (pt)
• Japanese (ja)
• Chinese (zh)
• Arabic (ar)
• Russian (ru)
• Korean (ko)
• Polish (pl)

Custom Localization

<CookieConsent
  mode="banner"
  language="en"
  customLocales={{
    en: {
      title: "Custom Cookie Settings",
      acceptAll: "Allow Everything",
    },
  }}
/>

Custom Category Settings

<CookieConsent
  mode="banner"
  categorySettings={{
    essential: {
      required: true,
      label: "Required Cookies",
    },
    analytics: {
      label: "Analytics & Performance",
    },
  }}
/>

Custom Styling

Custom Colors

<CookieConsent
  mode="banner"
  customColors={{
    primary: "#000000",
    background: "#ffffff",
  }}
/>

Custom Font

<CookieConsent
  mode="banner"
  customFontFamily="'Inter', sans-serif"
/>

License

MIT