React and headless

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>
  )
}

import { usePactPurpose } from '@pact/react'

export function AnalyticsGate() {
  const allowed = usePactPurpose('analytics')
  return allowed ? <Analytics /> : null
}

function Root({ children }) {
  return <PactProvider siteKey="site_live_your_key" mode="headless">
    <PrivacyExperience />
    {children}
  </PactProvider>
}

function PrivacyExperience() {
  const { decided, gpc, purposes, accept, reject, save } = usePact()
  // Your components. Your CSS. Your motion.
}