Frameworki

Dowiedz się, jak sterować PrivacyKit z poziomu JavaScript i integrować go z popularnymi frameworkami. Zawiera obsługę TypeScript oraz praktyczne wskazówki dla React, Vue, Angular, Svelte i Next.js.

Spis treści

Steruj PrivacyKit z poziomu JavaScript

Użyj window.PrivacyKit, aby odczytywać zgodę, sprawdzać wyrażenia zgody, otwierać okna dialogowe i nasłuchiwać zmian zgody. Przydaje się to, gdy aplikacja wymaga programowej kontroli, np. w React, Vue lub czystym 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();
}

Obsługa TypeScript

Popraw doświadczenie deweloperskie dzięki autouzupełnianiu, bezpieczeństwu typów i natywnej obsłudze komponentów webowych PrivacyKit.

Pobierz privacykit.d.ts

NPM

tsconfig.json

W nowoczesnych narzędziach (Next.js / Vite / TypeScript 5+) pliki .d.ts poza katalogiem src muszą być jawnie dołączone, aby kompilator je rozpoznał.

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

Uwagi dla frameworków

Wytyczne dotyczące integracji komponentów PrivacyKit w konkretnych frameworkach.

React: Dołącz plik definicji TypeScript, aby używać web komponentów PrivacyKit jako natywnych elementów wewnątrz JSX.
Vue 3: skonfiguruj compilerOptions.isCustomElement dla tagów PrivacyKit.
Angular: dodaj CUSTOM_ELEMENTS_SCHEMA tam, gdzie używasz custom elements.
Svelte: brak dodatkowej konfiguracji w czasie wykonywania.

Uwaga dla Next.js

<consent-dialog> działa w Server Components — dodaj go bezpośrednio do układu strony.
Aby używać JS API (onConsentChanged, onReady itp.), wywołuj je wewnątrz useEffect w komponencie oznaczonym jako 'use client'.