Frameworks

Lær, hvordan du styrer PrivacyKit fra JavaScript og integrerer det i populære frameworks. Inkluderer TypeScript-understøttelse og praktisk vejledning til React, Vue, Angular, Svelte og Next.js.

Indholdsfortegnelse

Styr PrivacyKit fra JavaScript

Brug window.PrivacyKit til at læse samtykke, tjekke samtykkeudtryk, åbne dialoger og lytte efter samtykkeændringer. Det er nyttigt, når din applikation har brug for programmatisk kontrol, f.eks. i React, Vue eller almindelig 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-understøttelse

Forbedr udvikleroplevelsen med autocomplete, typesikkerhed og indbygget understøttelse af PrivacyKit web components.

Download privacykit.d.ts

NPM

tsconfig.json

I moderne tooling (Next.js / Vite / TypeScript 5+) skal .d.ts-filer uden for src inkluderes eksplicit for at blive opfanget af compileren.

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

Bemærkninger pr. framework

Framework-specifikke råd til at integrere PrivacyKit custom elements.

React: Inkludér TypeScript-definitionsfilen for at bruge PrivacyKit web components som native elementer i JSX.
Vue 3: konfigurer compilerOptions.isCustomElement for PrivacyKit-tags.
Angular: tilføj CUSTOM_ELEMENTS_SCHEMA hvor custom elements bruges.
Svelte: ingen ekstra runtime-opsætning krævet.

Bemærkning for Next.js

<consent-dialog> virker i Server Components — indsæt den direkte i dit layout.
For at bruge JS API'et (onConsentChanged, onReady osv.) skal du kalde det inde i useEffect i en 'use client'-komponent.