@cookieprime/react-consent
v1.0.1
Published
CookiePrime React SDK - Global GDPR/CCPA compliant cookie consent with Google Consent Mode
Downloads
70
Maintainers
samirprimeReadme
@cookieprime/react-consent
The official React SDK for CookiePrime. A lightweight, developer-first, SSR-safe global Consent Management Platform (CMP). Fully optimized for GDPR (EU), CCPA/CPRA (US), PIPEDA (Canada), KVKK (Turkey), LGPD (Brazil), and MENA zone privacy regulations with built-in Google Consent Mode v2 support.
Installation
npm install @cookieprime/react-consent
Quick Start
1. Next.js 13+ (App Router)
Create a client wrapper component:
// components/CookiePrimeWrapper.js
"use client";
import { CookiePrimeProvider } from '@cookieprime/react-consent';
export default function CookiePrimeWrapper({ children }) {
return (
<CookiePrimeProvider apiKey="YOUR_API_KEY_HERE">
{children}
</CookiePrimeProvider>
);
}
Add it to your root layout:
// app/layout.js
import CookiePrimeWrapper from '../components/CookiePrimeWrapper';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<CookiePrimeWrapper>
{children}
</CookiePrimeWrapper>
</body>
</html>
);
}
2. Next.js 12 and older (Pages Router)
// pages/_app.js
import { CookiePrimeProvider } from '@cookieprime/react-consent';
function MyApp({ Component, pageProps }) {
return (
<CookiePrimeProvider apiKey="YOUR_API_KEY_HERE">
<Component {...pageProps}/>
</CookiePrimeProvider>
);
}
export default MyApp;
3. Standard React (Vite / CRA)
// src/App.js
import { CookiePrimeProvider } from '@cookieprime/react-consent';
function App() {
return (
<CookiePrimeProvider apiKey="YOUR_API_KEY_HERE">
<MainLayout/>
</CookiePrimeProvider>
);
}
export default App;
Features & Hooks Usage
Check Consent Conditions
import { useConsent } from '@cookieprime/react-consent';
export default function AnalyticsComponent() {
const { consent } = useConsent();
if (!consent?.analytics) return null;
return <script src="[https://example.com/analytics.js](https://example.com/analytics.js)" />;
}
Trigger Preferences Modal
import { useOpenSettings } from '@cookieprime/react-consent';
export default function CookieButton() {
const openSettings = useOpenSettings();
return <button onClick={openSettings}>Manage Cookie Settings</button>;
}
API Reference
CookiePrimeProvider Props
Prop Type Default Description
apiKey string Required Your CookiePrime site ID / API Key.
advancedMode boolean false Enable advanced consent mode mapping.
waitForUpdate number 500 Milliseconds to wait for consent signals.
devMode boolean false Enable terminal/console debugging.
License
MIT
---
## Part 2: Step-by-Step Guide to Make It Public on npm
Because your package name uses a scoped organization syntax (`@cookieprime/react-consent`)[cite: 2], npm automatically expects it to be a private, paid business package unless you explicitly pass a visibility flag during publication.
Follow these steps exactly to create and publish your workspace:
### 1. Structure the Folder
Open your terminal and run these commands to set up the directories matching your structure[cite: 2]:
```bash
mkdir cookieprime-react-sdk
cd cookieprime-react-sdk