React API

React-specific components and hooks. Import from @consentlayer/sdk/react.

Note: Requires React 18 or later. The banner script tag must also be installed — the SDK reads consent state from the banner's cookie.

ConsentLayerProvider

Wrap your app to provide consent state to all child components.

import { ConsentLayerProvider } from '@consentlayer/sdk/react'

function App() {
  return (
    <ConsentLayerProvider>
      <YourApp />
    </ConsentLayerProvider>
  )
}

The provider reads the initial consent state from the cookie and subscribes to changes. All hooks and components below must be used within this provider.

ConsentGate

Conditionally render content based on consent.

import { ConsentGate } from '@consentlayer/sdk/react'

// Only renders when statistics consent is given
<ConsentGate category="statistics">
  <GoogleAnalytics id="G-XXXXXXXXX" />
</ConsentGate>

// With a fallback
<ConsentGate category="marketing" fallback={<p>Marketing cookies are required for this feature.</p>}>
  <FacebookPixel />
</ConsentGate>

Props:

category (string, required) — The category slug to check
fallback (ReactNode, optional) — Shown when consent is not given
children (ReactNode, required) — Shown when consent is given

Re-renders automatically when consent state changes.

useConsent

Access the full consent state and helpers.

import { useConsent } from '@consentlayer/sdk/react'

function CookieSettings() {
  const { hasConsent, consentState, showPreferences } = useConsent()

  return (
    <div>
      <p>Analytics: {hasConsent('statistics') ? 'Enabled' : 'Disabled'}</p>
      <p>Jurisdiction: {consentState?.jurisdiction}</p>
      <button onClick={showPreferences}>
        Manage Cookie Preferences
      </button>
    </div>
  )
}

Returns:

hasConsent(category: string): boolean — Check consent for a category
consentState: ConsentState | null — Full consent state object
showPreferences(): void — Re-open the consent preferences modal

useCategoryConsent

Convenience hook for checking a single category.

import { useCategoryConsent } from '@consentlayer/sdk/react'

function AnalyticsLoader() {
  const hasAnalytics = useCategoryConsent('statistics')

  useEffect(() => {
    if (hasAnalytics) {
      loadAnalytics()
    }
  }, [hasAnalytics])

  return null
}

Parameters:

category (string) — The category slug to check

Returns: boolean — Re-renders when this category's consent changes.

React API

ConsentLayerProvider

ConsentGate

useConsent

useCategoryConsent

On this page