# React Integration

This guide shows how to integrate the the platform cookie banner into a React application, build a `useConsent` hook for consent-aware rendering, and handle Next.js-specific requirements.

## Installation

```bash
npm install @probo/cookie-banner
```

## Rendering the Themed Banner

Bannerul tematic este o componentă Web. Înregistrați-l o dată și plasați elementul personalizat în aspectul dvs.

1. **Create a `CookieBanner` component**

   ```tsx
   // src/components/CookieBanner.tsx

   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"
       />
     );
   }
   ```

2. ** Adăugați-l la aspectul dvs. cu un link de setări**

   Render `` once at the root of your application, and place `<the platform-settings-link>` in your header or footer so visitors can reopen preferences:

   ```tsx
   // src/App.tsx

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

Banner-ul se ocupă de tot de acolo – ia configurația, afișează dialogul de consimțământ atunci când este necesar și înregistrează consimțământul. sub CCPA dialogul începe închis; link-ul de setări afișează „Opțiunile dvs. de confidențialitate” cu pictograma oficială de renunțare și deschide panoul Opțiuni de confidențialitate.

### TypeScript

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

```ts
// src/probo.d.ts
declare namespace JSX {
  interface IntrinsicElements {
    "probo-cookie-banner": React.DetailedHTMLProps<
      React.HTMLAttributes & {
        "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
    >;
    "probo-acknowledge-button": React.DetailedHTMLProps<
      React.HTMLAttributes,
      HTMLElement
    >;
    "probo-privacy-choices": React.DetailedHTMLProps<
      React.HTMLAttributes,
      HTMLElement
    >;
  }
}
```

## The `useConsent` Hook

Utilizați Managerul de consimțământAPI(/docs/product/cookie-banner/consent-manager) pentru a construi un hook React care oferă componentelor acces reactiv la starea consimțământului.

```tsx
// src/hooks/useConsent.ts

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);
}
```

Această cârligă redă componenta ori de câte ori se schimbă starea consimțământului - la rezoluția inițială și după ce vizitatorul își actualizează preferințele.

### Usage

```tsx

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

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

  return ;
}
```

### Checking a single category

```tsx

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

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

  return ;
}
```

## Imperative Consent Checks

For code that runs outside of React's render cycle — event handlers, side effects, or non-React modules — use `getConsent()` directly instead of the hook:

```ts

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

Consultați referința [Consent ManagerAPI](/docs/product/cookie-banner/consent-manager) pentru întregulAPI.

## Next.js

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

```tsx
// src/components/CookieBanner.tsx
"use client";

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:

```tsx
// src/app/layout.tsx

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

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

```tsx
// src/components/AnalyticsLoader.tsx
"use client";

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

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

  return ;
}
```

### Pages Router

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

```tsx
// pages/_app.tsx

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

## Headless Components

Pentru un control complet asupra UI-ului de consimțământ din React, utilizați [componente fără cap] (/docs/product/cookie-banner/javascript-sdk#headless-components-full-control).

```tsx
"use client";

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 show the right controls for `OPT_IN`, `OPT_OUT`, or `NOTICE`. See the [JavaScript SDK](/docs/product/cookie-banner/javascript-sdk#headless-components-full-control) docs for the full component reference and [Layout API](/docs/product/cookie-banner/javascript-sdk#layout-api).

## Settings Link

Place `<probo-settings-link>` in your header or footer. It is required for all embeds — there is no floating settings button.

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

Puneți eticheta implicită ca copii (vizualizați pentru vizitatorii non-CCPA). Sub CCPA, SDK înlocuiește întotdeauna conținutul cu eticheta legală „Opțiunile dvs. de confidențialitate” și pictograma oficială de renunțare și deschide panoul Opțiuni de confidențialitate.

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

A se vedea [link de setări](/docs/product/cookie-banner/javascript-sdk#settings-link) pentru comportamentul complet conform regulamentului.