react-cookie-consent_teset2
Version:
React components to integrate TrustArc Cookie Consent Manager into React and Next.js apps
130 lines (97 loc) • 3.64 kB
Markdown
# 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).
```sh
npm install @trustarc/react-cookie-consent
# or
yarn add @trustarc/react-cookie-consent
```
## Building the Component
Before using or publishing the package, ensure it's built properly:
```sh
npm install # Install dependencies
npm 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**
1. **Install Dependencies** (if needed)
```sh
npm install next react react-dom
```
2. **Modify `app/layout.tsx`** in your Next.js project:
```tsx
"use client";
import { useTrustArc } from "@trustarc/react-cookie-consent";
import Link from "next/link";
export default function RootLayout({ children }: { children: React.ReactNode }) {
const { TrustArcScript, TrustArcConsentBanner, TrustArcCookiePreferencesLink } = useTrustArc("trustarc.com", {
ccmVersion: "advanced",
debug: true,
});
return (
<html lang="en">
<body>
<TrustArcScript />
<TrustArcConsentBanner />
{children}
<nav>
<Link href="/">Home</Link>
<Link href="/privacy-policy">Privacy Policy</Link>
</nav>
<footer>
<TrustArcCookiePreferencesLink />
</footer>
</body>
</html>
);
}
```
## Using TrustArc in a React Project
### **1. `App.tsx` (Main Application Component)**
```tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Layout from "./Layout";
import { useTrustArc } from "@trustarc/react-cookie-consent";
const App = () => {
const { TrustArcConsentBanner, TrustArcCookiePreferencesLink, TrustArcScript } = useTrustArc("trustarc.com", {
debug: true,
});
return (
<Router>
<TrustArcScript />
<Layout>
<TrustArcConsentBanner />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Layout>
<footer>
<TrustArcCookiePreferencesLink />
</footer>
</Router>
);
};
export 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.