Framework

Scopri come controllare PrivacyKit da JavaScript e integrarlo nei framework più diffusi. Include supporto TypeScript e indicazioni pratiche per React, Vue, Angular, Svelte e Next.js.

Indice

Controlla PrivacyKit da JavaScript

Usa window.PrivacyKit per leggere il consenso, verificare le espressioni di consenso, aprire finestre di dialogo e ascoltare le modifiche al consenso. Utile quando la tua applicazione richiede un controllo programmatico, ad esempio in React, Vue o JavaScript puro.

JavaScript
const api = window.PrivacyKit;

api.onReady(() => {
  const consent = window.PrivacyKit.readConsent();
  const initialState = consent ? JSON.stringify(consent, null, 2) : "";
  console.log(initialState);
});

api.onConsentChanged((consent) => {
  const updatedState = consent ? JSON.stringify(consent, null, 2) : "";
  console.log(updatedState);
});

function handleOpenConsentDialogBtnClick() {
  api.openConsentDialog();
}

function handleOpenPrivacyPolicyDialogBtnClick() {
  api.openPrivacyPolicyDialog();
}

function handleToggleComplianceMonitorBtnClick() {
  api.toggleComplianceMonitor();
}

Supporto TypeScript

Migliora l'esperienza di sviluppo con autocompletamento, sicurezza dei tipi e supporto nativo per i web component di PrivacyKit.

Scarica privacykit.d.ts

NPM

tsconfig.json

Negli strumenti moderni (Next.js / Vite / TypeScript 5+), i file .d.ts fuori da src devono essere inclusi esplicitamente per essere rilevati dal compilatore.

{
  "include": ["src", "types/**/*.d.ts"]
}

Note per framework

Indicazioni specifiche per integrare i custom element di PrivacyKit.

React: Includi il file di definizioni TypeScript per usare i web component PrivacyKit come elementi nativi in JSX.
Vue 3: configura compilerOptions.isCustomElement per i tag PrivacyKit.
Angular: aggiungi CUSTOM_ELEMENTS_SCHEMA dove usi custom elements.
Svelte: nessuna configurazione aggiuntiva a runtime.

Nota per Next.js

<consent-dialog> funziona nei Server Components — inseriscilo direttamente nel layout.
Per usare la JS API (onConsentChanged, onReady, ecc.), chiamala dentro useEffect in un componente 'use client'.