# tinyconsent-react
[](https://www.npmjs.com/package/tinyconsent-react)
[](https://opensource.org/licenses/MIT)
[](https://www.typescriptlang.org/)
**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 ``
- 📦 **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](https://tinyconsent.com/cookie-banner-generator)
## Installation
```bash
npm install tinyconsent-react
```
```bash
yarn add tinyconsent-react
```
```bash
pnpm add tinyconsent-react
```
## Quick Start
```tsx
import { TinyConsentScript } from 'tinyconsent-react';
function App() {
return (
<>
My App Content
);
}
```
That's it! Your cookie consent banner will appear automatically.
## What It Renders
The `` component renders:
```html
```
No internal logic, no bloat - just the script tag that loads your cookie banner.
## API Reference
### ``
React component that renders the TinyConsent script tag.
```tsx
{}} // Optional: Called when loaded
onError={(err) => {}} // Optional: Called on error
/>
```
### `useTinyConsent(scriptId)`
React hook for programmatic loading.
```tsx
import { useTinyConsent } from 'tinyconsent-react';
function App() {
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');
if (isLoading) return Loading...
;
if (error) return Error loading banner
;
return My App
;
}
```
### `getTinyConsentScriptUrl(scriptId)`
Get the full script URL.
```typescript
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)
```tsx
// app/layout.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### Next.js (Pages Router)
```tsx
// pages/_app.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function App({ Component, pageProps }) {
return (
<>
);
}
```
### Gatsby
```tsx
// gatsby-browser.js
import React from 'react';
import { TinyConsentScript } from 'tinyconsent-react';
export const wrapRootElement = ({ element }) => (
<>
{element}
);
```
### Create React App / Vite
```tsx
// src/App.tsx
import { TinyConsentScript } from 'tinyconsent-react';
function App() {
return (
<>
{/* Your app content */}
);
}
```
### Remix
```tsx
// app/root.tsx
import { TinyConsentScript } from 'tinyconsent-react';
export default function App() {
return (
);
}
```
## What is a Cookie Banner?
A cookie banner (cookie consent banner) collects user consent for cookies and tracking. It:
1. **Informs users** about cookies and tracking
2. **Gets consent** before setting non-essential cookies
3. **Provides control** to accept, reject, or customize
4. **Respects choices** by blocking scripts until consent
**Learn more**: [What is a Cookie Banner?](https://tinyconsent.com/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](https://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](https://tinyconsent.com/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](https://tinyconsent.com/ccpa-cookie-requirements)
## FAQ
### How do I get a script ID?
1. Visit [tinyconsent.com/cookie-banner-generator](https://tinyconsent.com/cookie-banner-generator)
2. Enter your email
3. Copy your script ID
### Does this work with Next.js 13+ App Router?
Yes! Add the component to your root layout's ``.
### 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](https://tinyconsent.com/what-is-consent-mode-v2) is automatically integrated.
### Can I customize the banner?
Yes! All customization is done in your [TinyConsent Dashboard](https://tinyconsent.com/dashboard) - no code changes needed.
### Do I need a privacy policy?
Yes. Generate one free: [tinyconsent.com/privacy-policy-generator](https://tinyconsent.com/privacy-policy-generator)
### Is it SSR compatible?
Yes. Works with Next.js, Remix, Gatsby, and other SSR frameworks.
## Troubleshooting
### Banner not appearing
1. Verify your script ID is correct
2. Check browser console for errors
3. Test in incognito mode (clears previous consent)
4. 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:
```bash
npm install -D @types/react
```
## TypeScript
Full TypeScript support:
```typescript
import {
TinyConsentScript,
TinyConsentScriptProps,
useTinyConsent,
UseTinyConsentResult,
getTinyConsentScriptUrl
} from 'tinyconsent-react';
```
## Related Packages
- [`tinyconsent`](https://www.npmjs.com/package/tinyconsent) - Vanilla JS/TS loader
- [`tinyconsent-webcomponent`](https://www.npmjs.com/package/tinyconsent-webcomponent) - Web Component
## Resources
- **Cookie Banner Generator**: [tinyconsent.com/cookie-banner-generator](https://tinyconsent.com/cookie-banner-generator)
- **React Guide**: [tinyconsent.com/cookie-banner-for-react](https://tinyconsent.com/cookie-banner-for-react)
- **Next.js Guide**: [tinyconsent.com/cookie-banner-for-nextjs](https://tinyconsent.com/cookie-banner-for-nextjs)
- **Privacy Policy Generator**: [tinyconsent.com/privacy-policy-generator](https://tinyconsent.com/privacy-policy-generator)
- **Dashboard**: [tinyconsent.com/dashboard](https://tinyconsent.com/dashboard)
## License
MIT © [TinyConsent](https://tinyconsent.com)
---
**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