API Reference

The @c15t/react package provides a React-specific components and hooks for managing privacy consents.

`useConsentManager`

The useConsentManager hook is used to access the consent manager state and methods.

Example Usage

import { useConsentManager } from "@c15t/react";
 
export default function Page() {
  const { resetConsents } = useConsentManager();
 
  return (
    <>
      {/* ... */}
      <button onClick={resetConsents}>
        Reset Consents
      </button>
    </>
  );

Returns

Prop	Type	Default
`consents`	`ConsentState`	-
`consentInfo`	`{ time: number; type: "necessary" \| "all" \| "custom"; }`	-
`showPopup`	`boolean`	-
`isLoadingConsentInfo`	`boolean`	-
`gdprTypes`	`AllConsentNames[]`	-
`isPrivacyDialogOpen`	`boolean`	-
`complianceSettings`	`Record<ComplianceRegion, ComplianceSettings>`	-
`callbacks`	`Callbacks`	-
`detectedCountry`	`string`	-
`locationInfo`	`LocationInfo`	-
`jurisdictionInfo`	`JurisdictionInfo`	-
`privacySettings`	`PrivacySettings`	-
`translationConfig`	`TranslationConfig`	-
`setTranslationConfig`	`(config: TranslationConfig) => void`	-
`includeNonDisplayedConsents`	`boolean`	-
`consentTypes`	`ConsentType[]`	-
`setConsent`	`(name: AllConsentNames, value: boolean) => void`	-
`setShowPopup`	`(show: boolean, force?: boolean \| undefined) => void`	-
`setIsPrivacyDialogOpen`	`(isOpen: boolean) => void`	-
`saveConsents`	`(type: "necessary" \| "all" \| "custom") => void`	-
`resetConsents`	`() => void`	-
`setGdprTypes`	`(types: AllConsentNames[]) => void`	-
`setComplianceSetting`	`(region: ComplianceRegion, settings: Partial<ComplianceSettings>) => void`	-
`resetComplianceSettings`	`() => void`	-
`setCallback`	`(name: keyof Callbacks, callback: CallbackFunction \| undefined) => void`	-
`setDetectedCountry`	`(country: string) => void`	-
`setLocationInfo`	`(location: LocationInfo \| null) => void`	-
`setJurisdictionInfo`	`(jurisdiction: JurisdictionInfo \| null) => void`	-
`fetchConsentBannerInfo`	`(url?: string \| undefined) => Promise<ConsentBannerResponse \| undefined>`	-
`getDisplayedConsents`	`() => ConsentType[]`	-
`hasConsented`	`() => boolean`	-
`clearAllData`	`() => void`	-
`updateConsentMode`	`() => void`	-
`setPrivacySettings`	`(settings: Partial<PrivacySettings>) => void`	-
`getEffectiveConsents`	`() => ConsentState`	-
`hasConsentFor`	`(consentType: AllConsentNames) => boolean`	-
`setIncludeNonDisplayedConsents`	`(include: boolean) => void`	-

`useTranslations`

The useTranslations hook is used to translate the text of the consent manager. See the internationalization guide for more information.

Example Usage

import * as CookieBanner from "@c15t/react/cookie-banner";
import { useTranslations } from "@c15t/react";
 
export default function CookieBanner() {
  const { cookieBanner } = useTranslations();
  
	return (
		<CookieBanner.Root>
			<CookieBanner.Card>
				<CookieBanner.Header>
					<CookieBanner.Title>{cookieBanner.title}</CookieBanner.Title>
					<CookieBanner.Description>{cookieBanner.description}</CookieBanner.Description>
				</CookieBanner.Header>
                {/* ... */}
			</CookieBanner.Card>
		</CookieBanner.Root>
	);
}

Returns

Returns a Translations object containing all the text strings used, organized by component:

Prop	Type	Default
`cookieBanner`	`Partial<CookieBannerTranslations>`	-
`consentManagerDialog`	`Partial<ConsentManagerDialogTranslations>`	-
`consentManagerWidget`	`Partial<ConsentManagerWidgetTranslations>`	-
`consentTypes`	`Partial<ConsentTypesTranslations>`	-

`ConsentManagerProvider`

The ConsentManagerProvider component is used to provide the consent manager context to the components that need it.

Props

Prop	Type	Default
`children`	`ReactNode`	-
`initialGdprTypes?`	`AllConsentNames[]`	-
`initialComplianceSettings?`	`Record<ComplianceRegion, ComplianceSettings>`	-
`noStyle?`	`boolean`	`false`
`disableAnimation?`	`boolean`	`false`
`theme?`	`Partial<{ 'banner.root': ThemeValue; 'banner.card': ThemeValue<CardCSSVariables>; 'banner.header.root': ThemeValue<HeaderCSSVariables>; ... 7 more ...; 'banner.overlay': ThemeValue<...>; }> & Partial<...>`	-
`translationConfig?`	`Partial<TranslationConfig>`	-
`trackingBlockerConfig?`	`TrackingBlockerConfig`	-
`scrollLock?`	`boolean`	`false`
`trapFocus?`	`boolean`	`true`
`namespace?`	`string`	`"c15tStore"`

Example Usage

import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";
 
export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}

`CookieBanner`

The CookieBanner component is used to display the cookie banner. See the cookie banner guide for more information.

Props

Prop	Type	Default
`theme?`	`Partial<{ 'banner.root': ThemeValue; 'banner.card': ThemeValue<CardCSSVariables>; 'banner.header.root': ThemeValue<HeaderCSSVariables>; ... 7 more ...; 'banner.overlay': ThemeValue<...>; }>`	`undefined`
`noStyle?`	`boolean`	`false`
`title?`	`ReactNode`	`undefined`
`description?`	`ReactNode`	`undefined`
`rejectButtonText?`	`ReactNode`	`undefined`
`customizeButtonText?`	`ReactNode`	`undefined`
`acceptButtonText?`	`ReactNode`	`undefined`
`scrollLock?`	`boolean`	`false`
`trapFocus?`	`true`	`true`

Example Usage

import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";
 
export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}

`ConsentManagerDialog`

The ConsentManagerDialog component is used to display the consent manager in a dialog. See the consent manager dialog guide for more information.

Props

Prop	Type	Default
`disableAnimation?`	`boolean`	-
`open?`	`boolean`	-

Example Usage

import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";
 
export default function App() {
  return (
    <ConsentManagerProvider initialGdprTypes={['necessary', 'marketing']}>
      <CookieBanner />
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
}

`ConsentManagerWidget`

This component is the core interface for detailed privacy consent management, enabling users to fine-tune their privacy preferences through an intuitive accordion interface. Learn more

Props

Prop	Type	Default
`hideBrading?`	`boolean`	-
`useProvider?`	`boolean`	-

Example Usage

import { ConsentManagerWidget } from "@c15t/react";
 
export default function CustomConsentWidget() {
  return (
    <ConsentManagerWidget>
      <ConsentManagerWidget.AccordionItems />
      <ConsentManagerWidget.Footer>
        <ConsentManagerWidget.RejectButton>
          Deny
        </ConsentManagerWidget.RejectButton>
        <ConsentManagerWidget.AcceptAllButton>
          Accept All
        </ConsentManagerWidget.AcceptAllButton>
      </ConsentManagerWidget.Footer>
    </ConsentManagerWidget>
  );
}

API Reference

useConsentManager

useTranslations

ConsentManagerProvider

CookieBanner

ConsentManagerDialog

ConsentManagerWidget

On this page

`useConsentManager`

`useTranslations`

`ConsentManagerProvider`

`CookieBanner`

`ConsentManagerDialog`

`ConsentManagerWidget`