react-cookie-consent_test2

v0.1.0-beta.112

Published

10 months ago

React components to integrate TrustArc Cookie Consent Manager into React and Next.js apps

0High
0Medium
0Low

antonioclessio

trustarc cookie-consent privacy react next.js vite

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).

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:

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

Install Dependencies (if needed)
```
npm install next react react-dom
```

Modify app/layout.tsx in your Next.js project:

"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)

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme