@iqworksai/consentiq-react

React SDK for ConsentIQ consent management platform.

Installation

npm install @iqworksai/consentiq-react
# or
yarn add @iqworksai/consentiq-react
# or
pnpm add @iqworksai/consentiq-react

Quick Start

import { ConsentIQProvider, CookieBanner, PreferenceCenter } from '@iqworksai/consentiq-react';

function App() {
  return (
    <ConsentIQProvider propertyKey="YOUR_PROPERTY_KEY">
      <CookieBanner />
      <PreferenceCenter />
      <YourApp />
    </ConsentIQProvider>
  );
}

Usage

Provider Configuration

<ConsentIQProvider
  propertyKey="YOUR_PROPERTY_KEY"
  apiUrl="https://consent.iqworks.ai" // Optional: custom API URL
  autoShow={true} // Optional: show banner automatically
  language="en" // Optional: override detected language
  debug={false} // Optional: enable debug logging
  onConsentChange={(consent) => {
    console.log('Consent updated:', consent);
  }}
>
  {children}
</ConsentIQProvider>

Using the Consent Hook

import { useConsentIQ } from '@iqworksai/consentiq-react';

function Analytics() {
  const { hasConsent } = useConsentIQ();

  if (!hasConsent('analytics')) {
    return null;
  }

  return <GoogleAnalytics />;
}

Simplified Consent Check

import { useConsent } from '@iqworksai/consentiq-react';

function MarketingScript() {
  const hasMarketing = useConsent('marketing');

  if (!hasMarketing) return null;

  return <FacebookPixel />;
}

Consent Gate Component

import { ConsentGate } from '@iqworksai/consentiq-react';

function App() {
  return (
    <ConsentGate
      category="analytics"
      fallback={<p>Enable analytics for better experience</p>}
    >
      <AnalyticsProvider />
    </ConsentGate>
  );
}

Manual Control

import { useConsentIQ } from '@iqworksai/consentiq-react';

function SettingsPage() {
  const { showPreferenceCenter, resetConsent } = useConsentIQ();

  return (
    <>
      <button onClick={showPreferenceCenter}>
        Manage Cookies
      </button>
      <button onClick={resetConsent}>
        Reset All Preferences
      </button>
    </>
  );
}

Consent Categories

| Category | Description | |----------|-------------| | necessary | Essential cookies (always enabled) | | analytics | Analytics and measurement | | marketing | Advertising and targeting | | preferences | User preferences | | social | Social media integration |

API Reference

useConsentIQ()

Returns the full consent context:

{
  consent: ConsentState;           // Current consent state
  marketingConsent: MarketingConsentState;
  config: PropertyConfig | null;   // Property configuration
  isLoading: boolean;              // SDK loading state
  isBannerVisible: boolean;        // Banner visibility
  isPreferenceCenterVisible: boolean;
  language: string;                // Current language
  regulation: string | null;       // Detected regulation
  hasConsent(category): boolean;   // Check consent
  acceptAll(): Promise<void>;      // Accept all
  rejectAll(): Promise<void>;      // Reject all
  updateConsent(updates): Promise<void>;
  showBanner(): void;
  hideBanner(): void;
  showPreferenceCenter(): void;
  hidePreferenceCenter(): void;
  resetConsent(): void;
}

License

MIT