Frameworks

Learn how to control PrivacyKit from JavaScript and integrate it into popular frameworks. Includes TypeScript support and practical guidance for React, Vue, Angular, Svelte, and Next.js.

Control PrivacyKit from JavaScript

Use window.PrivacyKit to read consent, check consent expressions, open dialogs, and listen for consent changes. This is useful when your application needs programmatic control, such as in React, Vue, or plain 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 Support

Improve developer experience with autocomplete, type safety, and native support for PrivacyKit web components.

Download privacykit.d.ts

NPM

tsconfig.json

In modern tooling (Next.js / Vite / TypeScript 5+), .d.ts files outside src must be explicitly included to be picked up by the compiler.

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

Framework Notes

Framework-specific setup notes for integrating PrivacyKit custom elements.

React: Include the TypeScript definition file to use PrivacyKit web components as native elements inside JSX.
Vue 3: configure compilerOptions.isCustomElement for PrivacyKit tags.
Angular: add CUSTOM_ELEMENTS_SCHEMA where custom elements are used.
Svelte: no extra setup needed for runtime usage.

Next.js note

<consent-dialog> works in Server Components — drop it directly in your layout.
To use the JS API (onConsentChanged, onReady, etc.), call it inside useEffect in a 'use client' component.