Cookie Banner for React
Adding a cookie banner to React doesn't require another npm dependency. TinyConsent works with any React setup — Create React App, Vite, or custom webpack configs — by simply adding a script tag to your index.html. No component wrappers, no context providers, no bundle bloat.
Get Your React Code
No signup required to get started
Live Banner Preview
This is how the cookie banner will appear on your React site.
My React Site uses cookies to enhance your experience and analyze traffic. By clicking "Accept", you consent to our use of cookies.
React Integration Code
Add this to: index.html + useConsent.ts
<!-- public/index.html (Create React App) -->
<!-- or index.html (Vite) -->
<!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>
<!-- TinyConsent - add before other scripts -->
<script src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID" async></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
// Optional: Check consent in your React components
// src/hooks/useConsent.ts
import { useState, useEffect } from 'react';
export function useConsent(category: string) {
const [hasConsent, setHasConsent] = useState(false);
useEffect(() => {
// Check initial consent
if (window.TinyConsent?.hasConsent) {
setHasConsent(window.TinyConsent.hasConsent(category));
}
// Listen for consent changes
const handler = () => {
setHasConsent(window.TinyConsent?.hasConsent(category) ?? false);
};
window.addEventListener('tinyconsent:change', handler);
return () => window.removeEventListener('tinyconsent:change', handler);
}, [category]);
return hasConsent;
}Replace YOUR_SCRIPT_ID with your actual script ID from TinyConsent.
Why React Sites Need a Cookie Banner
React SPAs often load analytics, error tracking (Sentry), and marketing pixels. These all set cookies that need consent under GDPR. Many React cookie banner packages add 20-50KB to your bundle; TinyConsent adds zero because it loads externally.
What TinyConsent Handles for React
- Automatic blocking of tracking scripts until consent
- Technical consent collection with region detection
- Google Consent Mode v2 integration
- Consent storage and audit logging
- Customizable design to match your site
How to Add a Cookie Banner to React
Generate your script
Get your unique script tag from tinyconsent.com.
Open index.html
Find your public/index.html (CRA) or index.html (Vite) file.
Add script to head
Paste the TinyConsent script tag inside the <head> section.
Build and deploy
Run your build command and deploy. The banner will appear automatically.
Use the JS API (optional)
Check consent status in your React code using window.TinyConsent.
React Tips
- •Zero bundle size impact — script loads externally
- •Works with any React version (16.8+ for hooks)
- •No provider wrappers needed at app root
- •TypeScript types available for the JS API
Why TinyConsent for React
60-Second Setup
No npm packages, no build configuration. Just one script tag and you're compliant.
Lightweight
Under 5KB initial load. Zero impact on your React bundle size.
Technical Infrastructure
Script blocking, consent logging, and region detection. Technical foundation for consent workflows.
Developer-Friendly
JavaScript API for checking consent status. Perfect for conditional script loading.
Frequently Asked Questions
Why not use react-cookie-consent?
react-cookie-consent and similar packages add to your bundle and require React context setup. TinyConsent is lighter and simpler — just a script tag.
Does it work with React 18?
Yes. TinyConsent is React-version agnostic because it runs outside React. Works with React 16, 17, 18, and future versions.
How do I conditionally render analytics?
Use our useConsent hook example above, or check window.TinyConsent.hasConsent("analytics") before initializing tracking.
Will it work with Strict Mode?
Yes. TinyConsent doesn't interact with React's rendering cycle, so Strict Mode double-rendering doesn't affect it.
Can I use it with Redux/Zustand for consent state?
You can, but it's not necessary. TinyConsent manages consent state internally. Use our JS API to read it when needed.
Does it support React Native?
TinyConsent is for web. For React Native mobile apps, you'd need a native consent solution. Web views can use TinyConsent.