tinyconsent-react
v1.0.1
Published
React component for TinyConsent cookie consent banners. One component, full GDPR/CCPA compliance.
Maintainers
loganraineyReadme
tinyconsent-react
The easiest cookie banner React component. One component for GDPR/CCPA-style cookie consent banners.
A lightweight React component for adding TinyConsent cookie consent banners to your React, Next.js, Gatsby, or any React-based application.
Why TinyConsent React?
- ⚛️ 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 - Loads your TinyConsent banner and lets you wire consent into your tracking scripts
- 🔧 Designed for Google Consent Mode v2 - Works with GA4-style implementations
- 🎨 Customizable - Configure via dashboard, no code changes
- 📱 SSR Ready - Works with Next.js, Remix, Gatsby
Get your script ID: tinyconsent.com/cookie-banner-generator
Installation
npm install tinyconsent-reactyarn add tinyconsent-reactpnpm add tinyconsent-reactQuick Start
import { 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.
What It Renders
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.
API Reference
<TinyConsentScript />
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
/>useTinyConsent(scriptId)
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>;
}getTinyConsentScriptUrl(scriptId)
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'Framework Examples
Next.js (App Router)
// 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>
);
}Next.js (Pages Router)
// pages/_app.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function App({ Component, pageProps }) {
return (
<>
<TinyConsentScript id="your-script-id" />
<Component {...pageProps} />
</>
);
}Gatsby
// gatsby-browser.js
import React from 'react';
import { TinyConsentScript } from 'tinyconsent-react';
export const wrapRootElement = ({ element }) => (
<>
<TinyConsentScript id="your-script-id" />
{element}
</>
);Create React App / Vite
// src/App.tsx
import { TinyConsentScript } from 'tinyconsent-react';
function App() {
return (
<>
<TinyConsentScript id="your-script-id" />
<div className="App">
{/* Your app content */}
</div>
</>
);
}Remix
// 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>
);
}What is a Cookie Banner?
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?
Cookie Banners vs. Full Compliance
What a Cookie Banner Does
A cookie banner handles consent collection:
- Displays notice about cookies
- Collects user preferences
- Blocks non-essential scripts until consent
- Stores consent choices
What Full Compliance Requires
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
GDPR Cookie Consent Requirements
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
CCPA Requirements
The CCPA requires:
- Disclose data collection practices
- "Do Not Sell" option for users
- Non-discrimination for opt-outs
Learn more: CCPA Cookie Requirements
FAQ
How do I get a script ID?
- Visit tinyconsent.com/cookie-banner-generator
- Enter your email
- Copy your script ID
Does this work with Next.js 13+ App Router?
Yes! Add the component to your root layout's <head>.
Does it block Google Analytics?
Yes. TinyConsent blocks GA4, Facebook Pixel, and other trackers until consent is given.
Does it support Google Consent Mode v2?
Yes. Google Consent Mode is automatically integrated.
Can I customize the banner?
Yes! All customization is done in your TinyConsent Dashboard - no code changes needed.
Do I need a privacy policy?
Yes. Generate one free: tinyconsent.com/privacy-policy-generator
Is it SSR compatible?
Yes. Works with Next.js, Remix, Gatsby, and other SSR frameworks.
Troubleshooting
Banner not appearing
- Verify your script ID is correct
- Check browser console for errors
- Test in incognito mode (clears previous consent)
- Ensure no ad blockers are interfering
Hydration warnings in Next.js
The component is designed to avoid hydration issues. If you see warnings, ensure you're using the latest version.
TypeScript errors
Make sure you have @types/react installed:
npm install -D @types/reactTypeScript
Full TypeScript support:
import {
TinyConsentScript,
TinyConsentScriptProps,
useTinyConsent,
UseTinyConsentResult,
getTinyConsentScriptUrl
} from 'tinyconsent-react';Related Packages
tinyconsent- Vanilla JS/TS loadertinyconsent-webcomponent- Web Component
Resources
- 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
License
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