Gathering detailed insights and metrics for @consentry/next
Gathering detailed insights and metrics for @consentry/next
Installations
npm install @consentry/nextDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
18.20.8
NPM Version
10.8.2
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
consentryio
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
61 Commits
1 Branches
1 Contributors
Updated on Jun 19, 2025
Maintainers
1
Package Meta Information
Latest Version
0.1.21
Package Id
@consentry/next@0.1.21
Unpacked Size
50.34 kB
Size
11.78 kB
File Count
8
NPM Version
10.8.2
Node Version
18.20.8
Published on
Jun 19, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
@consentry/next
Next.js integration for Consentry consent management. React hooks, providers, and automatic script injection — works seamlessly with @consentry/ui for a complete solution.
✨ What You Get
- ⚛️ React Context Provider — manages consent state across your app
- 🪝 Custom hooks —
useConsentManager()for easy state access - 📜 Automatic script injection — loads scripts based on user consent
- 🔄 Google Analytics integration — automatic consent mode v2 updates
- 🎨 UI component ready — pairs perfectly with
@consentry/ui - 🚀 Next.js optimized — works with App Router and Pages Router
📦 Installation
Complete Solution (Recommended)
1npm install @consentry/next @consentry/ui @consentry/core
Core Integration Only
1npm install @consentry/next @consentry/core
🚀 Quick Start (Complete Solution)
👑 This is the recommended approach — using @consentry/next with @consentry/ui gives you a complete, plug-and-play consent management solution.
Step 1: Create Consent Provider
Create providers/consent-provider.tsx:
1"use client"; 2import { ConsentConfig, ConsentManagerProvider } from "@consentry/next"; 3import ConsentManager from "@consentry/ui"; 4 5const ConsentProvider = ({ children }: { children: React.ReactNode }) => { 6 const consentConfig: ConsentConfig = { 7 debug: process.env.NODE_ENV === "development", 8 defaults: { 9 functional: true, 10 performance: false, 11 advertising: false, 12 social: false, 13 }, 14 scripts: [ 15 { 16 id: "gtag-js", 17 category: "performance", 18 consentRequired: true, 19 strategy: "afterInteractive", 20 src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX", 21 vendor: "Google Analytics", 22 }, 23 { 24 id: "gtag-init", 25 category: "performance", 26 consentRequired: true, 27 strategy: "afterInteractive", 28 content: ` 29 window.dataLayer = window.dataLayer || []; 30 function gtag(){dataLayer.push(arguments);} 31 gtag('js', new Date()); 32 gtag('config', 'G-XXXXXXXXXX'); 33 gtag('consent', 'default', { 34 analytics_storage: 'denied', 35 ad_storage: 'denied', 36 ad_user_data: 'denied', 37 ad_personalization: 'denied' 38 }); 39 `, 40 vendor: "Google Analytics", 41 }, 42 ], 43 }; 44 45 return ( 46 <ConsentManagerProvider config={consentConfig}> 47 <ConsentManager mode="modal" dark={false} /> 48 {children} 49 </ConsentManagerProvider> 50 ); 51}; 52 53export default ConsentProvider;
Step 2: Add to Your App
App Router (app/layout.tsx):
1import ConsentProvider from "@/providers/consent-provider"; 2import "./globals.css"; 3 4export default function RootLayout({ children }: { children: React.ReactNode }) { 5 return ( 6 <html lang="en"> 7 <body> 8 <ConsentProvider>{children}</ConsentProvider> 9 </body> 10 </html> 11 ); 12}
Pages Router (pages/_app.tsx):
1import ConsentProvider from "@/providers/consent-provider"; 2import type { AppProps } from "next/app"; 3 4export default function App({ Component, pageProps }: AppProps) { 5 return ( 6 <ConsentProvider> 7 <Component {...pageProps} /> 8 </ConsentProvider> 9 ); 10}
Step 3: Use Anywhere in Your App
1"use client"; 2import { useConsentManager } from "@consentry/next"; 3 4export default function PrivacySettings() { 5 const { preferences, updatePreferences, hasConsentedOnce } = useConsentManager(); 6 7 if (!hasConsentedOnce) { 8 return <p>Please accept or decline cookies first.</p>; 9 } 10 11 return ( 12 <div> 13 <h2>Your Privacy Settings</h2> 14 <label> 15 <input 16 type="checkbox" 17 checked={preferences.performance} 18 onChange={e => updatePreferences({ ...preferences, performance: e.target.checked })} 19 /> 20 Analytics & Performance 21 </label> 22 <label> 23 <input 24 type="checkbox" 25 checked={preferences.advertising} 26 onChange={e => updatePreferences({ ...preferences, advertising: e.target.checked })} 27 /> 28 Advertising & Marketing 29 </label> 30 </div> 31 ); 32}
That's it! You now have a complete consent management system with banner, modal, and programmatic control.
🎛️ Core Components
ConsentManagerProvider
The main provider that manages all consent state and script injection.
1interface ConsentManagerProviderProps { 2 config: ConsentConfig; // Your consent configuration 3 children: React.ReactNode; // Your app content 4 storageKey?: string; // Custom localStorage key (default: 'consentry-preferences') 5 debug?: boolean; // Enable debug logging 6}
useConsentManager Hook
Access consent state and controls from any component.
1const { 2 preferences, // Current user preferences 3 updatePreferences, // Update all preferences 4 setCategoryConsent, // Update single category 5 hasConsentedTo, // Check specific category 6 hasConsentedOnce, // Has user made any choice? 7 acceptAll, // Accept all categories 8 rejectAll, // Reject all (except functional) 9 resetConsent, // Clear all consent data 10} = useConsentManager();
📋 Complete API Reference
ConsentConfig
1interface ConsentConfig { 2 debug?: boolean; // Enable debug logging 3 defaults: CookiePreferences; // Default consent state 4 scripts: ConsentScript[]; // Scripts to manage 5 storageKey?: string; // Custom storage key 6 googleAnalyticsId?: string; // GA4 tracking ID for auto-setup 7}
CookiePreferences
1interface CookiePreferences { 2 functional: boolean; // Always true (required for site function) 3 performance: boolean; // Analytics, monitoring, A/B testing 4 advertising: boolean; // Marketing pixels, retargeting 5 social: boolean; // Social media embeds, sharing 6}
ConsentScript
1interface ConsentScript { 2 id: string; // Unique identifier 3 category: ConsentCategory; // Which consent category 4 consentRequired?: boolean; // Require explicit consent 5 strategy?: "afterInteractive" | "lazyOnload" | "beforeInteractive"; 6 src?: string; // External script URL 7 content?: string; // Inline script content 8 noscript?: string; // Fallback for no-JS 9 vendor?: string; // Third-party service name 10 default?: boolean; // Load by default 11}
Hook Return Type
1interface ConsentManagerHook { 2 preferences: CookiePreferences; 3 updatePreferences: (preferences: CookiePreferences) => void; 4 setCategoryConsent: (category: ConsentCategory, granted: boolean) => void; 5 hasConsentedTo: (category: ConsentCategory) => boolean; 6 hasConsentedOnce: () => boolean; 7 acceptAll: () => void; 8 rejectAll: () => void; 9 resetConsent: () => void; 10}
🔧 Configuration Examples
Google Analytics 4
1const gaConfig: ConsentScript[] = [ 2 { 3 id: "gtag-js", 4 category: "performance", 5 consentRequired: true, 6 strategy: "afterInteractive", 7 src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX", 8 vendor: "Google Analytics", 9 }, 10 { 11 id: "gtag-init", 12 category: "performance", 13 consentRequired: true, 14 strategy: "afterInteractive", 15 content: ` 16 window.dataLayer = window.dataLayer || []; 17 function gtag(){dataLayer.push(arguments);} 18 gtag('js', new Date()); 19 gtag('config', 'G-XXXXXXXXXX', { 20 send_page_view: true, 21 cookie_flags: 'SameSite=None;Secure' 22 }); 23 // Required for Google Analytics v2 consent mode - must start with 'denied' 24 gtag('consent', 'default', { 25 analytics_storage: 'denied', 26 ad_storage: 'denied', 27 ad_user_data: 'denied', 28 ad_personalization: 'denied' 29 }); 30 `, 31 vendor: "Google Analytics", 32 }, 33];
Facebook Pixel
1const facebookPixel: ConsentScript = { 2 id: "facebook-pixel", 3 category: "advertising", 4 consentRequired: true, 5 strategy: "afterInteractive", 6 content: ` 7 !function(f,b,e,v,n,t,s) 8 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 9 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 10 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 11 n.queue=[];t=b.createElement(e);t.async=!0; 12 t.src=v;s=b.getElementsByTagName(e)[0]; 13 s.parentNode.insertBefore(t,s)}(window, document,'script', 14 'https://connect.facebook.net/en_US/fbevents.js'); 15 fbq('init', 'YOUR_PIXEL_ID'); 16 fbq('track', 'PageView'); 17 `, 18 noscript: `<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1" />`, 19 vendor: "Meta", 20};
Multiple Analytics Tools
1const consentConfig: ConsentConfig = { 2 debug: process.env.NODE_ENV === "development", 3 defaults: { 4 functional: true, 5 performance: false, 6 advertising: false, 7 social: false, 8 }, 9 scripts: [ 10 // Google Analytics 11 ...gaConfig, 12 13 // Hotjar 14 { 15 id: "hotjar", 16 category: "performance", 17 consentRequired: true, 18 strategy: "afterInteractive", 19 content: ` 20 (function(h,o,t,j,a,r){ 21 h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; 22 h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6}; 23 a=o.getElementsByTagName('head')[0]; 24 r=o.createElement('script');r.async=1; 25 r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; 26 a.appendChild(r); 27 })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); 28 `, 29 vendor: "Hotjar", 30 }, 31 32 // Facebook Pixel 33 facebookPixel, 34 35 // Twitter Pixel 36 { 37 id: "twitter-pixel", 38 category: "advertising", 39 consentRequired: true, 40 strategy: "afterInteractive", 41 content: ` 42 !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); 43 },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js', 44 a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); 45 twq('init','YOUR_TWITTER_PIXEL_ID'); 46 twq('track','PageView'); 47 `, 48 vendor: "Twitter", 49 }, 50 ], 51};
💡 Usage Patterns
Programmatic Control
1"use client"; 2import { useConsentManager } from "@consentry/next"; 3import { openConsentSettings } from "@consentry/ui"; 4 5export default function Footer() { 6 const { hasConsentedOnce, acceptAll, rejectAll } = useConsentManager(); 7 8 return ( 9 <footer> 10 <div> 11 <button onClick={() => openConsentSettings()}>Cookie Settings</button> 12 13 {!hasConsentedOnce && ( 14 <div> 15 <button onClick={acceptAll}>Accept All Cookies</button> 16 <button onClick={rejectAll}>Reject All</button> 17 </div> 18 )} 19 </div> 20 </footer> 21 ); 22}
Conditional Rendering
1"use client"; 2import { useConsentManager } from "@consentry/next"; 3 4export default function AnalyticsDashboard() { 5 const { hasConsentedTo } = useConsentManager(); 6 7 if (!hasConsentedTo("performance")) { 8 return ( 9 <div> 10 <p>Analytics data requires performance cookies.</p> 11 <button onClick={() => openConsentSettings()}>Enable Analytics</button> 12 </div> 13 ); 14 } 15 16 return <div>{/* Your analytics dashboard */}</div>; 17}
Social Media Embeds
1"use client"; 2import { useConsentManager } from "@consentry/next"; 3 4export default function YouTubeEmbed({ videoId }: { videoId: string }) { 5 const { hasConsentedTo, setCategoryConsent } = useConsentManager(); 6 7 if (!hasConsentedTo("social")) { 8 return ( 9 <div className="consent-placeholder"> 10 <p>This content requires social media cookies.</p> 11 <button onClick={() => setCategoryConsent("social", true)}>Enable Social Media</button> 12 </div> 13 ); 14 } 15 16 return ( 17 <iframe 18 src={`https://www.youtube.com/embed/${videoId}`} 19 width="560" 20 height="315" 21 frameBorder="0" 22 allowFullScreen 23 /> 24 ); 25}
Custom Hook
1import { useConsentManager } from "@consentry/next"; 2import { useCallback } from "react"; 3 4export function useAnalytics() { 5 const { hasConsentedTo, setCategoryConsent } = useConsentManager(); 6 7 const trackEvent = useCallback( 8 (event: string, data?: any) => { 9 if (hasConsentedTo("performance") && typeof gtag !== "undefined") { 10 gtag("event", event, data); 11 } 12 }, 13 [hasConsentedTo] 14 ); 15 16 const enableAnalytics = useCallback(() => { 17 setCategoryConsent("performance", true); 18 }, [setCategoryConsent]); 19 20 return { 21 trackEvent, 22 enableAnalytics, 23 analyticsEnabled: hasConsentedTo("performance"), 24 }; 25} 26 27// Usage 28function MyComponent() { 29 const { trackEvent, analyticsEnabled } = useAnalytics(); 30 31 const handleClick = () => { 32 trackEvent("button_click", { button_id: "header_cta" }); 33 }; 34 35 return <button onClick={handleClick}>Click me {analyticsEnabled && "(tracked)"}</button>; 36}
🛠️ Advanced Configuration
Environment-Specific Setup
1const getConsentConfig = (): ConsentConfig => { 2 const isProd = process.env.NODE_ENV === "production"; 3 4 return { 5 debug: !isProd, 6 defaults: { 7 functional: true, 8 performance: isProd, // Auto-enable in production 9 advertising: false, 10 social: false, 11 }, 12 scripts: isProd ? productionScripts : developmentScripts, 13 }; 14};
Custom Storage Key
1<ConsentManagerProvider config={consentConfig} storageKey="my-app-consent"> 2 {children} 3</ConsentManagerProvider>
Server-Side Rendering Considerations
1"use client"; 2import dynamic from "next/dynamic"; 3 4// Avoid hydration issues 5const ConsentManager = dynamic(() => import("@consentry/ui"), { 6 ssr: false, 7}); 8 9const ConsentProvider = ({ children }: { children: React.ReactNode }) => { 10 return ( 11 <ConsentManagerProvider config={consentConfig}> 12 <ConsentManager mode="modal" /> 13 {children} 14 </ConsentManagerProvider> 15 ); 16};
🧪 Testing
Mock the Hook
1// __mocks__/@consentry/next.ts 2export const useConsentManager = () => ({ 3 preferences: { 4 functional: true, 5 performance: true, 6 advertising: false, 7 social: false, 8 }, 9 updatePreferences: jest.fn(), 10 setCategoryConsent: jest.fn(), 11 hasConsentedTo: jest.fn(() => true), 12 hasConsentedOnce: jest.fn(() => true), 13 acceptAll: jest.fn(), 14 rejectAll: jest.fn(), 15 resetConsent: jest.fn(), 16});
Test Components
1import { render, screen } from "@testing-library/react"; 2import { useConsentManager } from "@consentry/next"; 3import MyComponent from "./MyComponent"; 4 5jest.mock("@consentry/next"); 6 7test("shows analytics when performance cookies enabled", () => { 8 (useConsentManager as jest.Mock).mockReturnValue({ 9 hasConsentedTo: (category: string) => category === "performance", 10 }); 11 12 render(<MyComponent />); 13 expect(screen.getByText("Analytics Dashboard")).toBeInTheDocument(); 14});
🔒 Privacy & Compliance
GDPR Compliance
- Consent before tracking — Scripts only load after explicit consent
- Granular control — Users choose specific categories
- Easy withdrawal — One-click preference changes
- Data portability — Export/import consent settings
Google Consent Mode v2
The provider automatically handles Google's consent mode v2:
1// Automatically called when preferences change 2gtag("consent", "update", { 3 analytics_storage: preferences.performance ? "granted" : "denied", 4 ad_storage: preferences.advertising ? "granted" : "denied", 5 ad_user_data: preferences.advertising ? "granted" : "denied", 6 ad_personalization: preferences.advertising ? "granted" : "denied", 7});
🚨 Common Issues & Solutions
Hydration Mismatch
1// ❌ Wrong - causes hydration issues 2export default function Layout({ children }) { 3 return ( 4 <ConsentManagerProvider config={config}> 5 <ConsentManager /> 6 {children} 7 </ConsentManagerProvider> 8 ); 9} 10 11// ✅ Correct - use dynamic import 12const ConsentManager = dynamic(() => import("@consentry/ui"), { ssr: false });
Scripts Not Loading
1// ❌ Wrong - bypasses consent management 2<Script src="https://analytics.example.com/script.js" />; 3 4// ✅ Correct - managed by consent system 5scripts: [ 6 { 7 id: "analytics", 8 category: "performance", 9 src: "https://analytics.example.com/script.js", 10 }, 11];
Hook Outside Provider
1// ❌ Wrong - hook used outside provider 2function App() { 3 const { preferences } = useConsentManager(); // Error! 4 return <div>...</div>; 5} 6 7// ✅ Correct - hook used inside provider 8function App() { 9 return ( 10 <ConsentManagerProvider config={config}> 11 <MyComponent /> 12 </ConsentManagerProvider> 13 ); 14} 15 16function MyComponent() { 17 const { preferences } = useConsentManager(); // Works! 18 return <div>...</div>; 19}
🔗 Related Packages
@consentry/core— Framework-agnostic consent logic@consentry/ui— React components for banners and modals
Complete Setup Guide
For the full experience with UI components, check out the @consentry/ui documentation which includes:
- 🎨 Customizable cookie banners and modals
- 🌈 Color themes and styling options
- 🌍 Multi-language support
- 📱 Mobile-optimized responsive design
- ♿ Full accessibility support
📄 License
MIT — Copyright © 2025 Mustafa ONAL
No vulnerabilities found.
No security vulnerabilities found.