The easiest cookie banner React component. One component, full GDPR/CCPA compliance.
A lightweight React component for adding TinyConsent cookie consent banners to your React, Next.js, Gatsby, or any React-based application.
- ⚛️ React-native - Proper React component, not a script hack
- 🚀 One component - Just
<TinyConsentScript id="..." /> - 📦 Tiny - Under 1KB, loads the actual banner async
- ✅ Cookie consent handling - Blocks scripts until user consents
- 🔧 Google Consent Mode v2 - Automatic GA4 integration
- 🎨 Customizable - Configure via dashboard, no code changes
- 📱 SSR Ready - Works with Next.js, Remix, Gatsby
Get your script ID: tinyconsent.com/cookie-banner-generator
npm install tinyconsent-reactyarn add tinyconsent-reactpnpm add tinyconsent-reactimport { TinyConsentScript } from 'tinyconsent-react';
function App() {
return (
<>
<TinyConsentScript id="your-script-id" />
<div>My App Content</div>
</>
);
}That's it! Your cookie consent banner will appear automatically.
The <TinyConsentScript /> component renders:
<script src="https://scripts.tinyconsent.com/api/scripts/your-script-id" async></script>No internal logic, no bloat - just the script tag that loads your cookie banner.
React component that renders the TinyConsent script tag.
<TinyConsentScript
id="your-script-id" // Required: Your TinyConsent script ID
async={true} // Optional: Load async (default: true)
defer={false} // Optional: Defer execution (default: false)
nonce="abc123" // Optional: CSP nonce
onLoad={() => {}} // Optional: Called when loaded
onError={(err) => {}} // Optional: Called on error
/>React hook for programmatic loading.
import { useTinyConsent } from 'tinyconsent-react';
function App() {
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error loading banner</div>;
return <div>My App</div>;
}Get the full script URL.
import { getTinyConsentScriptUrl } from 'tinyconsent-react';
const url = getTinyConsentScriptUrl('your-script-id');
// 'https://scripts.tinyconsent.com/api/scripts/your-script-id'// app/layout.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<TinyConsentScript id="your-script-id" />
</head>
<body>{children}</body>
</html>
);
}// pages/_app.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function App({ Component, pageProps }) {
return (
<>
<TinyConsentScript id="your-script-id" />
<Component {...pageProps} />
</>
);
}// gatsby-browser.js
import React from 'react';
import { TinyConsentScript } from 'tinyconsent-react';
export const wrapRootElement = ({ element }) => (
<>
<TinyConsentScript id="your-script-id" />
{element}
</>
);// src/App.tsx
import { TinyConsentScript } from 'tinyconsent-react';
function App() {
return (
<>
<TinyConsentScript id="your-script-id" />
<div className="App">
{/* Your app content */}
</div>
</>
);
}// app/root.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
<TinyConsentScript id="your-script-id" />
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
);
}A cookie banner (cookie consent banner) collects user consent for cookies and tracking. It:
- Informs users about cookies and tracking
- Gets consent before setting non-essential cookies
- Provides control to accept, reject, or customize
- Respects choices by blocking scripts until consent
Learn more: What is a Cookie Banner?
A cookie banner handles consent collection:
- Displays notice about cookies
- Collects user preferences
- Blocks non-essential scripts until consent
- Stores consent choices
Cookie consent is one part of privacy compliance. Full compliance also needs:
- Privacy Policy - Document explaining data practices
- Data Processing Records - Internal documentation
- User Rights Handling - Data access/deletion processes
TinyConsent handles cookie consent. For privacy policies: tinyconsent.com/privacy-policy-generator
The GDPR requires for cookies:
- Get consent BEFORE setting non-essential cookies
- Easy reject option required
- Granular consent options (analytics, marketing)
- No pre-ticked boxes
Learn more: GDPR Cookie Requirements
The CCPA requires:
- Disclose data collection practices
- "Do Not Sell" option for users
- Non-discrimination for opt-outs
Learn more: CCPA Cookie Requirements
- Visit tinyconsent.com/cookie-banner-generator
- Enter your email
- Copy your script ID
Yes! Add the component to your root layout's <head>.
Yes. TinyConsent blocks GA4, Facebook Pixel, and other trackers until consent is given.
Yes. Google Consent Mode is automatically integrated.
Yes! All customization is done in your TinyConsent Dashboard - no code changes needed.
Yes. Generate one free: tinyconsent.com/privacy-policy-generator
Yes. Works with Next.js, Remix, Gatsby, and other SSR frameworks.
- Verify your script ID is correct
- Check browser console for errors
- Test in incognito mode (clears previous consent)
- Ensure no ad blockers are interfering
The component is designed to avoid hydration issues. If you see warnings, ensure you're using the latest version.
Make sure you have @types/react installed:
npm install -D @types/reactFull TypeScript support:
import {
TinyConsentScript,
TinyConsentScriptProps,
useTinyConsent,
UseTinyConsentResult,
getTinyConsentScriptUrl
} from 'tinyconsent-react';tinyconsent- Vanilla JS/TS loadertinyconsent-webcomponent- Web Component
- Cookie Banner Generator: tinyconsent.com/cookie-banner-generator
- React Guide: tinyconsent.com/cookie-banner-for-react
- Next.js Guide: tinyconsent.com/cookie-banner-for-nextjs
- Privacy Policy Generator: tinyconsent.com/privacy-policy-generator
- Dashboard: tinyconsent.com/dashboard
MIT © TinyConsent
Keywords: cookie banner react, react cookie consent, cookie banner npm, GDPR react, CCPA react, cookie consent component, next.js cookie banner, gatsby cookie banner, one line cookie banner, lightweight cookie consent, cookie banner generator