Rammeverk

Lær hvordan du styrer PrivacyKit fra JavaScript og integrerer det i populære rammeverk. Inkluderer TypeScript-støtte og praktisk veiledning for React, Vue, Angular, Svelte og Next.js.

Innholdsfortegnelse

Kontroller PrivacyKit fra JavaScript

Bruk window.PrivacyKit for å lese samtykke, sjekke samtykkeuttrykk, åpne dialoger og lytte etter samtykkeendringer. Dette er nyttig når applikasjonen din trenger programmatisk kontroll, som 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øtte

Forbedre utvikleropplevelsen med autofullføring, typesikkerhet og innebygd støtte for PrivacyKit web components.

Last ned privacykit.d.ts

NPM

tsconfig.json

I moderne verktøy (Next.js / Vite / TypeScript 5+), må .d.ts-filer utenfor src-katalogen inkluderes eksplisitt for å plukkes opp av kompilatoren.

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

Rammeverksnotater

Rammeverksspesifikke oppsett for å integrere PrivacyKit sine custom elements.

React: Inkluder TypeScript-definisjonsfilen for å bruke PrivacyKit web components som native elementer inne i JSX.
Vue 3: konfigurer compilerOptions.isCustomElement for PrivacyKit-tags.
Angular: legg til CUSTOM_ELEMENTS_SCHEMA der custom elements brukes.
Svelte: ingen ekstra oppsett nødvendig ved runtime.

Next.js-notat

<consent-dialog> fungerer i Server Components — legg den rett i layout-filen din.
For å bruke JS-API-et (onConsentChanged, onReady osv.), kall det inne i useEffect i en 'use client'-komponent.