Gathering detailed insights and metrics for @trustarc/react-trustarc-cookie-consent
Gathering detailed insights and metrics for @trustarc/react-trustarc-cookie-consent
Installations
npm install @trustarc/react-trustarc-cookie-consentDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
23.9.0
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
2
Package Meta Information
Latest Version
0.1.0-beta.1
Package Id
@trustarc/react-trustarc-cookie-consent@0.1.0-beta.1
Unpacked Size
13.98 kB
Size
3.81 kB
File Count
8
NPM Version
10.9.2
Node Version
23.9.0
Published on
Mar 04, 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
2
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.
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/trustarc-cookie-consent 2# or 3yarn add @trustarc/trustarc-cookie-consent
Local Development & Testing
If you want to test this package locally before publishing, you can use npm link to create a symbolic link between your component and your test project.
Steps to Test Locally with npm link
-
Navigate to the component project directory:
1cd path/to/trustarc-cookie-consent -
Run
npm linkto create a global symlink:1npm link -
Navigate to your test React project:
1cd path/to/test-project -
Run
npm linkto use the local version of the package:1npm link @trustarc/trustarc-cookie-consent -
Run the test project to check the component:
1npm start
Removing the Linked Package
If you need to remove the linked package and revert to the published version, run:
1npm unlink @trustarc/trustarc-cookie-consent 2npm install
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/trustarc-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/trustarc-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.