React Cookie Banner Integration Guide

Quick Start for React

Installation (No NPM Required)

Unlike other cookie banner solutions, TinyConsent doesn't require npm installation. Just add one script tag to your index.html:

<script src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID" async></script>

Create React App

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID" async></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Next.js (App Router)

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

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

React-Specific Features

Zero Bundle Impact

No npm package means no increase to your JavaScript bundle size. Loads externally via CDN.

Framework Agnostic

Works with React, Vue, Angular, Svelte, and vanilla JavaScript. No framework lock-in.

JavaScript API

Programmatic access to consent status for conditional script loading and analytics.

No Hydration Issues

Loads independently of React's render cycle. No SSR/CSR mismatches.

Using Consent in React Components

Custom useConsent Hook

Create a custom hook to check consent status in your React components:

// hooks/useConsent.ts
import { useState, useEffect } from 'react';

export function useConsent(category: string = 'analytics') {
  const [hasConsent, setHasConsent] = useState(false);

  useEffect(() => {
    // Check initial consent
    if (window.TinyConsent?.hasConsent) {
      setHasConsent(window.TinyConsent.hasConsent(category));
    }

    // Listen for consent changes
    const handleConsentChange = () => {
      setHasConsent(window.TinyConsent?.hasConsent(category) ?? false);
    };

    window.addEventListener('tinyconsent:change', handleConsentChange);
    return () => window.removeEventListener('tinyconsent:change', handleConsentChange);
  }, [category]);

  return hasConsent;
}

// Usage in component
function AnalyticsComponent() {
  const hasAnalyticsConsent = useConsent('analytics');

  if (!hasAnalyticsConsent) {
    return null; // Don't load analytics
  }

  return <GoogleAnalytics />;
}

Frequently Asked Questions

How do I add TinyConsent to a React app?

Simply add the script tag to your index.html file. No npm packages or React components needed. The banner works independently of your React app.

Does it work with Next.js and other React frameworks?

Yes, it works with Next.js, Create React App, Vite, Gatsby, and any React framework. The script tag approach is framework-agnostic.

Can I check consent status in my React components?

Yes, TinyConsent exposes a JavaScript API. You can create custom hooks or check window.TinyConsent.hasConsent() directly.

Will it cause hydration issues in Next.js?

No, TinyConsent loads and operates independently of React's hydration cycle. It injects DOM elements after your app hydrates.

Can I customize the banner for my React app?

Yes, full customization is available through your TinyConsent dashboard - colors, positioning, text, and behavior.

Ready to Add Cookie Consent to Your React App?

Get your script ID and integrate TinyConsent in minutes. No impact on your React bundle size.

React Cookie Banner