Gathering detailed insights and metrics for react-cookie-consent_test2
Gathering detailed insights and metrics for react-cookie-consent_test2
Installations
npm install react-cookie-consent_test2Developer Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
23.6.1
NPM Version
10.9.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.1.0-beta.112
Package Id
react-cookie-consent_test2@0.1.0-beta.112
Unpacked Size
25.38 kB
Size
7.17 kB
File Count
21
NPM Version
10.9.2
Node Version
23.6.1
Published on
Mar 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
Dev Dependencies
3
TrustArc React Hook
Overview
The useTrustArc React hook provides an easy way to integrate TrustArc Consent Manager into your React applications. It dynamically loads the TrustArc consent script, ensures the banner is created, and provides a "Cookie Preferences" link.
This package is designed for TrustArc customers who need to seamlessly integrate consent management into their web applications.
Beta Release
Please note that this is a beta release. While we have tested the package, there may still be some issues. Use it at your own risk and report any bugs or issues you encounter. Your feedback is valuable in helping us improve the package.
Installation
You can install this package via npm or yarn (assuming it's published as a package or included in your project).
1npm install @trustarc/react-cookie-consent 2# or 3yarn add @trustarc/react-cookie-consent
Building the Component
Before using or publishing the package, ensure it's built properly:
1npm install # Install dependencies 2npm run build # Generate the production-ready bundle
Using TrustArc in a Next.js Project
To integrate TrustArc Cookie Consent Manager in a Next.js project, modify the layout.tsx file to ensure the consent banner and script are loaded globally.
Steps to Integrate TrustArc in Next.js
-
Install Dependencies (if needed)
1npm install next react react-dom -
Modify
app/layout.tsxin your Next.js project:1"use client"; 2import { useTrustArc } from "@trustarc/react-cookie-consent"; 3import Link from "next/link"; 4 5export default function RootLayout({ children }: { children: React.ReactNode }) { 6 const { TrustArcScript, TrustArcConsentBanner, TrustArcCookiePreferencesLink } = useTrustArc("trustarc.com", { 7 ccmVersion: "advanced", 8 debug: true, 9 }); 10 11 return ( 12 <html lang="en"> 13 <body> 14 <TrustArcScript /> 15 <TrustArcConsentBanner /> 16 {children} 17 <nav> 18 <Link href="/">Home</Link> 19 <Link href="/privacy-policy">Privacy Policy</Link> 20 </nav> 21 <footer> 22 <TrustArcCookiePreferencesLink /> 23 </footer> 24 </body> 25 </html> 26 ); 27}
Using TrustArc in a React Project
1. App.tsx (Main Application Component)
1import React from "react"; 2import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3import Home from "./Home"; 4import About from "./About"; 5import Layout from "./Layout"; 6import { useTrustArc } from "@trustarc/react-cookie-consent"; 7 8const App = () => { 9 const { TrustArcConsentBanner, TrustArcCookiePreferencesLink, TrustArcScript } = useTrustArc("trustarc.com", { 10 debug: true, 11 }); 12 13 return ( 14 <Router> 15 <TrustArcScript /> 16 <Layout> 17 <TrustArcConsentBanner /> 18 <Routes> 19 <Route path="/" element={<Home />} /> 20 <Route path="/about" element={<About />} /> 21 </Routes> 22 </Layout> 23 <footer> 24 <TrustArcCookiePreferencesLink /> 25 </footer> 26 </Router> 27 ); 28}; 29 30export default App;
Conclusion
This useTrustArc hook simplifies the integration of TrustArc Consent Manager in React applications. It provides a reliable solution that:
- Dynamically injects the script & ensures proper loading.
- Prevents multiple re-injections.
- Handles React Strict Mode behavior.
- Supports debugging for easier troubleshooting.
If you encounter any issues, enable debug: true and check the console logs.
No vulnerabilities found.
No security vulnerabilities found.