Developer documentation

Same consent semantics First-party runtime GPC before tags

Install the packages

pnpm add @pact/react @pact/runtime

Install the bootstrap

This is the enforcement boundary. Keep it server-rendered and before optional code.

server document

typescript

import { PactGate, PactProvider } from '@pact/react'

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

Wire React

src/App.tsx

tsx

import { PactGate, PactProvider } from '@pact/react'

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

src/PrivacyButton.tsx

tsx

import { PactPreferencesButton, usePact } from '@pact/react'

export function PrivacyButton() {
  const { gpc, purposes } = usePact()

  return (
    <PactPreferencesButton>
      Privacy choices {gpc ? '· GPC active' : ''}
    </PactPreferencesButton>
  )
}

FINISHVerify the production installation