@pactconsent/react

Headless React primitives for Pact Consent. The package lets an application use Pact's consent state and enforcement while rendering either the managed consent surface or a completely custom interface.

Install

pnpm add @pactconsent/react @pactconsent/runtime

Managed UI

import { PactGate, PactProvider } from '@pactconsent/react';

export function App() {
  return (
    <PactProvider siteKey="site_123" src="/pact.js" apiBase="/v1">
      <PactGate purpose="analytics"><Analytics /></PactGate>
      <YourApplication />
    </PactProvider>
  );
}

Place the provider before any optional analytics or advertising code. Copy pact.js from @pactconsent/runtime to the first-party URL passed as src.

Fully custom UI

import { PactProvider, usePact } from '@pactconsent/react';

function PrivacyChoices() {
  const pact = usePact();
  if (!pact.isOpen) return null;

  return (
    <div role="dialog" aria-label="Privacy choices">
      <button onClick={() => pact.reject()}>Reject</button>
      <button onClick={() => pact.accept()}>Accept</button>
    </div>
  );
}

export function App() {
  return (
    <PactProvider siteKey="site_123" mode="headless">
      <PrivacyChoices />
    </PactProvider>
  );
}

usePact() exposes readiness, region, GPC, purpose decisions, preference-open state, and accept, reject, and save actions. PactGate and usePactPurpose() keep optional code behind explicit purpose decisions.

The package is ESM-only and requires React 18 or newer.