React Integration

This guide shows how to integrate the platform cookie banner into a React app, build a useConsent link for conscious consent rendering, and manage Next.js specific requirements.

Installation

npm install @probo/cookie-banner

The thematic banner is a Web component. Record it once and place the custom item in your appearance.

Create a CookieBanner component

import { useEffect } from "react";
import { registerCookieBanner } from "@probo/cookie-banner";

let registered = false;

export function CookieBanner() {
  useEffect(() => {
    if (!registered) {
      registerCookieBanner();
      registered = true;
    }
  }, []);

  return (
    <probo-cookie-banner
      banner-id="YOUR_BANNER_ID"
      base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
      position="bottom-left"
    />
  );
}

Add it to your layout with a settings link

Render <CookieBanner /> once at the root of your application and place <probo-settings-link> in the header or footer so that visitors can reopen their preferences:

import { CookieBanner } from "./components/CookieBanner";

export default function App() {
  return (
    <>
      {/* your app */}
      <CookieBanner />
      <footer>
        <probo-settings-link>Cookie settings</probo-settings-link>
      </footer>
    </>
  );
}

The banner handles everything from there – takes the configuration, displays the consent dialog when needed and records consent. under CCPA the dialog starts closed; the settings link displays “Your Privacy Options” with the official opt-out icon and opens the Privacy Options panel.

TypeScript

If TypeScript complains about the <probo-cookie-banner> JSX element, add a type statement:

declare namespace JSX {
  interface IntrinsicElements {
    "probo-cookie-banner": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement> & {
        "banner-id": string;
        "base-url": string;
        position?:
          | "bottom-left"
          | "bottom-right"
          | "bottom-center"
          | "top-left"
          | "top-right"
          | "top-center";
        lang?: string;
      },
      HTMLElement
    >;
    "probo-settings-link": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    >;
    "probo-acknowledge-button": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    >;
    "probo-privacy-choices": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>,
      HTMLElement
    >;
  }
}

The `useConsent` Hook

Use the Consent Manager API to build a React hook that gives components reactive access to consent state.

import { useSyncExternalStore } from "react";
import { getConsent } from "@probo/cookie-banner/consent";

const consent = getConsent();

function subscribe(onStoreChange: () => void): () => void {
  return consent.subscribe(onStoreChange);
}

function getSnapshot(): Record<string, boolean> {
  return consent.getAll();
}

function getServerSnapshot(): Record<string, boolean> {
  return {};
}

export function useConsent(): Record<string, boolean> {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

This hook returns the component whenever the consent status changes – at the initial resolution and after the visitor updates their preferences.

Usage

import { useConsent } from "../hooks/useConsent";

export function AnalyticsLoader() {
  const consent = useConsent();

  if (!consent.analytics) {
    return null;
  }

  return <ThirdPartyAnalytics />;
}

Checking a single category

import { useConsent } from "../hooks/useConsent";

export function ChatWidget() {
  const consent = useConsent();

  if (!consent.functional) {
    return <p>Enable functional cookies to use live chat.</p>;
  }

  return <LiveChat />;
}

For code running outside the React rendering cycle – event managers, side effects managers or non-React modules – use ___ZBT_I18N_RUNTIME_BLOCK_187__ directly instead of the hook:

import { getConsent } from "@probo/cookie-banner/consent";

export function trackEvent(name: string) {
  if (getConsent().has("analytics")) {
    analytics.track(name);
  }
}

See the Consent Manager API reference to the whole.

Next.js

The SDK cookie banner accesses document, window, and localStorage, so it needs to work on the client. In Next.js App Router, mark the component with "use client":

"use client";

import { useEffect } from "react";
import { registerCookieBanner } from "@probo/cookie-banner";

let registered = false;

export function CookieBanner() {
  useEffect(() => {
    if (!registered) {
      registerCookieBanner();
      registered = true;
    }
  }, []);

  return (
    <probo-cookie-banner
      banner-id="YOUR_BANNER_ID"
      base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
      position="bottom-left"
    />
  );
}

Then render it in your root layout:

import { CookieBanner } from "../components/CookieBanner";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <CookieBanner />
      </body>
    </html>
  );
}

The useConsent hook works in any client component. Mark the hooks that use it with "use client" or consume them from the client components:

"use client";

import { useConsent } from "../hooks/useConsent";

export function AnalyticsLoader() {
  const consent = useConsent();

  if (!consent.analytics) {
    return null;
  }

  return <ThirdPartyAnalytics />;
}

Pages Router

In Router Pages, the banner component works without "use client". Play it in _app.tsx:

import type { AppProps } from "next/app";
import { CookieBanner } from "../components/CookieBanner";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <CookieBanner />
    </>
  );
}

Headless Components

For full control of the consent UI in React, use headless componentsRecord them once and compose the Web Component building blocks in JSX:

"use client";

import { useEffect } from "react";
import { registerHeadlessComponents } from "@probo/cookie-banner/headless";

let registered = false;

export function CustomConsentBanner() {
  useEffect(() => {
    if (!registered) {
      registerHeadlessComponents();
      registered = true;
    }
  }, []);

  return (
    <>
      <probo-cookie-banner-root
        banner-id="YOUR_BANNER_ID"
        base-url="https://your-probo-instance.com/api/cookie-banner/v1/"
      >
        <probo-banner>
          <div className="my-banner">
            <p>We use cookies to improve your experience.</p>
            <probo-accept-button>
              <button>Accept all</button>
            </probo-accept-button>
            <probo-reject-button>
              <button>Reject all</button>
            </probo-reject-button>
            <probo-customize-button>
              <button>Customize</button>
            </probo-customize-button>
            <probo-acknowledge-button>
              <button>Got it</button>
            </probo-acknowledge-button>
          </div>
        </probo-banner>

        <probo-preference-panel>
          <div className="my-preferences">
            <probo-category-list>
              <template>
                <div className="category">
                  <span data-slot="name"></span>
                  <span data-slot="description"></span>
                  <probo-category-toggle>
                    <input type="checkbox" />
                  </probo-category-toggle>
                </div>
              </template>
            </probo-category-list>
            <probo-save-button>
              <button>Save preferences</button>
            </probo-save-button>
          </div>
        </probo-preference-panel>

        <probo-privacy-choices>
          <div className="my-privacy-choices">
            <probo-reject-button>
              <button>Do Not Sell or Share My Personal Information</button>
            </probo-reject-button>
          </div>
        </probo-privacy-choices>
      </probo-cookie-banner-root>

      <probo-settings-link>Cookie settings</probo-settings-link>
    </>
  );
}

Use resolveLayout / resolveBannerText from @probo/cookie-banner/headless to display the correct controls for ___ZBT_I18N_RUNTIME_BLOCK_207__, OPT_OUT or NOTICE. JavaScript SDK Docks for the complete reference of the components and Layout API.

Settings Link

Place <probo-settings-link> in the header or footer. It is necessary for all incorporations - there is no floating settings button.

export function Footer() {
  return (
    <footer>
      <probo-settings-link>Cookie settings</probo-settings-link>
    </footer>
  );
}

Put the default tag as copies (view for non-CCPA visitors). Under CCPA, the SDK always replaces content with the legal tag “Your Privacy Options” and the official opt-out icon and opens the Privacy Options panel.

probo-settings-link {
  font-size: 14px;
  color: #334155;
  text-decoration: underline;
}

See Settings link Comportamentul deplin prin reglementare.