Ohjelmistokehykset

Opi ohjaamaan PrivacyKitia JavaScriptillä ja integroimaan se suosittuihin ohjelmistokehyksiin. Sisältää TypeScript-tuen ja käytännön ohjeet React-, Vue-, Angular-, Svelte- ja Next.js-kehyksille.

Sisällysluettelo

Ohjaa PrivacyKitia JavaScriptillä

Käytä window.PrivacyKit suostumuksen lukemiseen, suostumuslausekkeiden tarkistamiseen, dialogien avaamiseen ja suostumusmuutosten kuuntelemiseen. Tämä on hyödyllistä, kun sovelluksesi tarvitsee ohjelmallista hallintaa, esimerkiksi Reactissa, Vuessa tai tavallisessa JavaScriptissä.

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-tuki

Paranna kehittäjäkokemusta automaattitäydennyksellä, tyyppiturvalla ja PrivacyKit-verkkokomponenttien natiivituella.

Lataa privacykit.d.ts

NPM

tsconfig.json

Modernissa työkalupinossa (Next.js / Vite / TypeScript 5+), .d.ts-tiedostot src-hakemiston ulkopuolella täytyy sisällyttää eksplisiittisesti, jotta kääntäjä tunnistaa ne.

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

Kehyskohtaiset huomiot

Kehyskohtaiset asennushuomiot PrivacyKitin custom element -integraatioon.

React: Lisää TypeScript-määrittelytiedosto, jotta voit käyttää PrivacyKitin web-komponentteja natiiveina elementteinä JSX:ssä.
Vue 3: määritä compilerOptions.isCustomElement PrivacyKit-tageille.
Angular: lisää CUSTOM_ELEMENTS_SCHEMA siellä missä custom elementtejä käytetään.
Svelte: runtime-käyttöön ei tarvita lisäasetuksia.

Next.js -huomio

<consent-dialog> toimii Server Components -komponenteissa — lisää se suoraan layoutiin.
Käyttääksesi JS-APIa (onConsentChanged, onReady jne.), kutsu sitä useEffectin sisällä 'use client'-komponentissa.