Ramverk

Lär dig hur du styr PrivacyKit från JavaScript och integrerar det i populära ramverk. Inkluderar TypeScript-stöd och praktisk vägledning för React, Vue, Angular, Svelte och Next.js.

Innehåll

Styr PrivacyKit från JavaScript

Använd window.PrivacyKit för att läsa samtycke, kontrollera samtyckesuttryck, öppna dialogrutor och lyssna på samtyckesändringar. Det är användbart när din applikation behöver programmatisk kontroll, t.ex. i React, Vue eller vanlig JavaScript.

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

TypeScript-stöd

Förbättra utvecklarupplevelsen med autokomplettering, typsäkerhet och inbyggt stöd för PrivacyKit web components.

Ladda ner privacykit.d.ts

NPM

tsconfig.json

I moderna verktyg (Next.js / Vite / TypeScript 5+) måste .d.ts-filer utanför src inkluderas explicit för att kompilatorn ska hitta dem.

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

Anmärkningar per ramverk

Riktlinjer för hur PrivacyKit integreras i olika ramverk.

React: Inkludera TypeScript-definitionsfilen för att använda PrivacyKit web components som native element i JSX.
Vue 3: konfigurera compilerOptions.isCustomElement för PrivacyKit-taggar.
Angular: lägg till CUSTOM_ELEMENTS_SCHEMA där custom elements används.
Svelte: ingen extra runtime-konfiguration behövs.

Notering för Next.js

<consent-dialog> fungerar i Server Components — lägg den direkt i din layout.
För att använda JS-API:t (onConsentChanged, onReady osv.), anropa det inuti useEffect i en 'use client'-komponent.