Cookie Banner Generator
React & Next.js Integration

React Cookie Banner
No npm Install. Under 10KB.

Add a cookie consent banner to your React or Next.js app in 5 minutes. No npm packages to install, no bundle bloat, no maintenance headaches. One async script tag and you are GDPR and PIPEDA compliant.

Build Your Banner FreeView Installation Guide

Why Use a Hosted Script Instead of npm?

Most developers reach for react-cookie-consent on npm. Here is why that costs you more than it saves.

If you are building a React application that serves users in the EU, Canada, California, or Brazil, you need a react cookie consent solution. GDPR, PIPEDA, CCPA, and LGPD all require informed consent before setting non-essential cookies -- violations can result in fines up to 4% of your annual revenue.

Traditional npm cookie consent packages like react-cookie-consent add 15-50KB to your bundle, require manual updates when privacy laws change, need custom CSS to match your brand, and often lack proper consent management for third-party scripts like Google Analytics or Facebook Pixel.

Our approach is different. Instead of a cookie consent npm package, we provide a hosted script that loads asynchronously from a global CDN. Zero impact on your bundle size. No dependency maintenance. Instant updates when you change your banner design or compliance settings. It is the lightweight cookie consent for React apps that developers actually want.

Traditional NPM Packages

  • xAdds 15-50KB to your JavaScript bundle
  • xManual npm updates when laws or features change
  • xCustom CSS required to match your brand
  • xRequires code changes for every banner update
  • xVersion conflicts with other dependencies
  • xCI/CD rebuild needed for every change

Our Hosted Script Approach

  • +Zero bytes added to your bundle (0KB)
  • +Automatic updates -- always current with privacy laws
  • +Visual builder -- no CSS or code needed
  • +Push Live from dashboard -- instant changes
  • +No dependency conflicts, ever
  • +No rebuild or redeployment required

How Do You Add Cookie Consent to a React App?

No npm install required -- one script tag in your layout. Here are copy-paste examples for every major React setup.

Unlike traditional cookie consent npm packages that require npm install react-cookie-consent followed by component imports and configuration objects, our approach is radically simpler. You add a single async script tag and the banner just works. The hosted script is under 10KB gzipped, loads asynchronously so it never blocks rendering, and gets served from a global CDN with edge caching.

1

Create Your Banner in the Dashboard

Sign up free, customize colors, layout, and compliance settings

Our visual builder lets you configure every aspect of your react cookie banner -- colors, fonts, layout, cookie categories (Necessary, Analytics, Marketing, Preferences), and compliance mode (GDPR, PIPEDA, CCPA, or auto-detect by region). Preview in real-time before going live.

Build Your Banner Free
2

Copy the Script Tag

One line of code -- that is it

The dashboard gives you a script tag like this:

<script src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js" async></script>

Replace YOUR_BANNER_ID with the actual ID from your dashboard. The full script URL is provided when you click "Get Code" in the builder.

3

Add to Your App

Choose your framework below

Deploy your React app and the cookie consent banner appears automatically. Future changes? Update in the dashboard and click "Push Live". Changes appear within seconds -- no code changes, no redeployment.

No redeployment needed
Instant updates
Zero maintenance
Under 10KB gzipped

How Do You Install a Cookie Banner in Next.js, Vite, or CRA?

The script must load before any analytics or marketing scripts. Here are copy-paste examples for every major React framework.

Next.js App Router (Recommended)

For Next.js 13+, 14, and 15 with the app directory

Open your app/layout.tsx file and add the Script component. Using strategy="beforeInteractive" ensures the cookie banner loads before any tracking scripts:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* Cookie Consent Banner - loads before tracking scripts */}
        <Script
          src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Why beforeInteractive? This Next.js script strategy injects the script into the initial HTML document, ensuring it runs before any client-side JavaScript. This is critical for blocking analytics scripts until consent is given.

Next.js Pages Router

For Next.js projects using the pages directory

Add the script to your pages/_document.tsx file:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {/* Cookie Consent Banner */}
        <script
          src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
          async
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vite or Create React App

For standard React projects without a framework

Add the script tag directly to your index.html (Vite) or public/index.html (CRA) file:

<!-- index.html (Vite) or public/index.html (CRA) -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>

    <!-- Cookie Consent Banner - MUST be before analytics scripts -->
    <script
      src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
      async
    ></script>

    <!-- Google Analytics, Facebook Pixel, etc. go AFTER the cookie script -->
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Important: Place the cookie consent script before any analytics or tracking scripts (Google Analytics, Facebook Pixel, etc.) to ensure they only load after the user gives consent.

Remix

For Remix React applications

Add the script to your app/root.tsx file inside the head:

// app/root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        {/* Cookie Consent Banner */}
        <script
          src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
          async
        />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

How Does React Cookie Consent Work with Google Analytics?

Automatic GA4 consent management, Consent Mode v2, and a custom React hook for reading consent state

One of the most common requirements for a react-cookie-consent Google Analytics integration is ensuring that GA4 does not fire until the user accepts analytics cookies. Our solution handles this automatically -- no custom event listeners, no manual consent state management, and full support for Google Consent Mode v2.

Next.js App Router with GA4 and Cookie Consent

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* Step 1: Cookie Consent - MUST load first */}
        <Script
          src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
          strategy="beforeInteractive"
        />

        {/* Step 2: Google Analytics (gtag.js) */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-XXXXXXXXXX');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  )
}

That is all the code you need. Our cookie consent script automatically detects Google Analytics and manages consent states using Google Consent Mode v2. No additional configuration required.

Reading Consent State in React Components

Access user consent choices from your React code

// hooks/use-cookie-consent.ts
'use client'

import { useState, useEffect } from 'react'

export function useCookieConsent() {
  const [consent, setConsent] = useState<{
    analytics: boolean
    marketing: boolean
    preferences: boolean
  }>({
    analytics: false,
    marketing: false,
    preferences: false,
  })

  useEffect(() => {
    const handleConsent = (event: CustomEvent) => {
      setConsent(event.detail)
    }

    window.addEventListener(
      'cookie-consent-update',
      handleConsent as EventListener
    )

    return () => {
      window.removeEventListener(
        'cookie-consent-update',
        handleConsent as EventListener
      )
    }
  }, [])

  return consent
}

// Usage in a component:
// const { analytics, marketing } = useCookieConsent()
// if (analytics) { /* load analytics features */ }

Our cookie banner dispatches a cookie-consent-update CustomEvent whenever the user changes their preferences. You can listen for this event in any React component to conditionally render features that require consent.

Conditional Loading by Route Group

Only show the cookie banner on public pages, not in your admin dashboard

// app/(public)/layout.tsx
// This layout applies to all public-facing routes
import Script from 'next/script'

export default function PublicLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {/* Only loads cookie banner on public routes */}
      <Script
        src="https://www.cookie-banner.ca/api/scripts/YOUR_BANNER_ID.js"
        strategy="beforeInteractive"
      />
      {children}
    </>
  )
}

// app/(dashboard)/layout.tsx
// No cookie banner needed for authenticated dashboard pages
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <>{children}</>
}

Next.js route groups (folders wrapped in parentheses) let you apply different layouts to different sections of your app. This is useful when you only need the cookie banner on public-facing pages.

Bundle Size: How Does This Compare to react-cookie-consent?

Bundle Size Comparison

Cookie Banner (ours)
0 KB
react-cookie-consent
~15 KB
cookieconsent (npm)
~25 KB
Osano / OneTrust
50-200 KB

* Our solution adds 0 KB to your bundle because the script loads externally. The external script itself is under 10KB gzipped and cached on a global CDN.

Async Loading

The script loads asynchronously and never blocks your critical rendering path. Your LCP score stays unaffected.

Global CDN

Served from edge locations worldwide. Users load the script from the nearest server, typically in under 50ms.

No CLS Impact

The banner overlays your content rather than pushing it down. Zero Cumulative Layout Shift.

Supported Third-Party Scripts

Our react cookie consent solution automatically manages consent for all major analytics and marketing platforms:

  • Google Analytics (GA4 / gtag.js)
  • Google Tag Manager
  • Facebook / Meta Pixel
  • TikTok Pixel
  • Microsoft Clarity
  • LinkedIn Insight Tag
  • Hotjar
  • Mixpanel
  • Segment
  • HubSpot Tracking

Not sure which cookies your React app currently sets? Use our free cookie scanner tool to get a full audit.

Next.js-Specific Benefits

  • Server Component compatible -- the script tag loads independently of your React component tree, so it works with both server and client components.
  • App Router and Pages Router -- tested and supported on both routing systems with code examples for both.
  • Static exports work -- if you use next export for static site generation, the script tag is included in the HTML output.
  • Edge Runtime compatible -- no server-side dependencies, so your app works on Vercel Edge, Cloudflare Workers, or any edge platform.
  • Turbopack ready -- no npm package means no bundler compatibility issues with Turbopack or any other bundler.

Frequently Asked Questions

Common questions about react cookie consent, npm packages, and compliance

Does this react cookie consent solution work with Next.js 15 and the App Router?

Yes. Our react cookie consent banner works with Next.js 15, 14, 13, and older versions. It is compatible with both the App Router (app directory) and Pages Router (pages directory). For App Router, use the Next.js Script component with strategy='beforeInteractive'. For Pages Router, add it to _document.tsx. Both methods are shown in the installation guide above.

Will this cookie consent solution affect my Core Web Vitals?

No. Unlike npm cookie consent packages that add 15-50KB to your bundle, our script loads asynchronously from a CDN. It does not block your page rendering or negatively impact your Largest Contentful Paint (LCP), Interaction to Next Paint (INP), or Cumulative Layout Shift (CLS) scores. The external script is under 10KB gzipped and adds zero bytes to your JavaScript bundle.

Do I need to redeploy my React app to update the cookie banner?

No. That is the key advantage of our hosted react cookie banner over npm packages like react-cookie-consent. Make changes in the visual dashboard and click 'Push Live' -- updates appear on your site within seconds. No code changes, no npm update, no CI/CD pipeline, no redeployment, no downtime.

Why use a hosted script instead of an npm cookie consent package?

We intentionally use a hosted script instead of an npm package. This gives you instant updates without dependency management, zero bundle size impact, no version conflicts, and no need to rebuild your app. The script loads from a global CDN optimized for fast delivery. Many teams switch from npm packages like react-cookie-consent to our solution to eliminate maintenance overhead.

How does the react cookie consent Google Analytics integration work?

Our cookie banner automatically manages Google Analytics consent. Place our script before your GA4 tag, and it blocks Google Analytics from loading until the user accepts analytics cookies. When consent is granted, GA4 loads automatically. When consent is withdrawn, tracking stops. This works with both gtag.js and Google Tag Manager, and fully supports Google Consent Mode v2.

Is this react cookie banner GDPR, PIPEDA, and CCPA compliant?

Yes. Our cookie consent banner supports GDPR (EU), PIPEDA (Canada), CCPA/CPRA (California), LGPD (Brazil), and other global privacy regulations. Configure the compliance mode in the dashboard based on your audience location. The banner automatically adjusts -- GDPR requires opt-in consent while CCPA requires opt-out.

Not Using React? We Have Got You Covered

Our cookie consent solution works with all major web platforms

Want to learn more about cookie consent compliance? Read our comprehensive guide on GDPR cookie consent requirements or scan your site with our free cookie scanner tool.

2-minute setup · $99 one-time · No npm install

Ready to Add React Cookie Consent?

Build your cookie banner in the visual builder, copy one script tag, and your React app is compliant. Under 10KB, async loading, zero bundle impact.

Build Your Cookie BannerBrowse All Integrations