@c15t/react

@c15t/react is the React integration for c15t, a developer-first consent management platform used by thousands of sites. It ships a ConsentManagerProvider plus prebuilt, themeable UI for cookie banners, consent dialogs, preference centers, and a resurfacing trigger widget, alongside headless hooks (useConsentManager, useTranslations, useConsentScript) for teams that want to build a fully custom consent experience on top of the same state.

The package works with React 16.8 through 19, including React Server Components via a dedicated ./server subpath and explicit ‘use client’ boundaries, and supports three deployment modes: a hosted backend on inth.com, a self-hosted @c15t/backend, or fully offline browser-only storage for local development and static sites. Consent-gated script loading for Google Tag Manager, Google Consent Mode v2, Meta Pixel, and dozens of other analytics/marketing tools is handled by the companion @c15t/scripts package, and IAB TCF 2.3 UI/hooks are available through a separate @c15t/react/iab subpath so non-IAB apps don’t ship that code.

What You Get

• A ConsentManagerProvider that initializes and syncs a shared consent store/manager from the core c15t runtime, with hydration-safe state updates via startTransition
• Prebuilt, themeable components: ConsentBanner, ConsentDialog, ConsentDialogTrigger, ConsentDialogLink, and a consent-widget/frame system for isolated rendering
• Headless hooks (useConsentManager, useTranslations, useTheme, useConsentScript, useConsentDialogTrigger) for building fully custom consent UI on the same state
• A dedicated ./server subpath (headers, fetch-ssr-data, init-cache-key, normalize-url) so server/RSC code paths never pull in client-only bundles
• Optional @c15t/react/iab subpath adding IAB TCF 2.3 UI and hooks without bloating apps that don’t need programmatic-advertising compliance
• Granular subpath exports (primitives/, components/, hooks, headless) that let bundlers tree-shake unused UI and keep bundle size down

Common Use Cases

• Adding a GDPR/CCPA-compliant cookie banner and preference center to a React or Next.js app without hand-rolling consent state
• Gating Google Tag Manager, Google Consent Mode v2, Meta Pixel, and other marketing/analytics scripts behind user consent
• Building a fully custom consent UI on top of c15t’s headless hooks while keeping the compliance logic centralized
• Running consent management entirely offline/browser-only for local development, demos, or static site previews
• Adding IAB TCF 2.3 support for programmatic advertising workflows via the dedicated iab subpath

Under The Hood

Architecture The package sits inside a Bun/Turborepo monorepo and is built with rslib into unbundled, tree-shakeable ESM and CJS outputs with separately generated type declarations. ConsentManagerProvider (src/providers/consent-manager-provider.tsx) is the composition root: it calls a shared getOrCreateConsentRuntime from the core c15t package to obtain a reusable consent store and manager, wires up a subscription with startTransition to avoid hydration flashes on first render, and republishes state through two React contexts (ConsentStateContext for consent state, GlobalThemeContext for theming). Feature hooks such as useConsentManager wrap store selectors in useCallback with explicit dependency arrays to defeat over-aggressive memoization from the React Compiler, a workaround documented inline with a link to the originating GitHub issue. UI components live under src/components/* (consent-banner, consent-dialog, consent-dialog-trigger, frame, integrations, iab) each with its own subpath export for tree-shaking, while a separate src/server directory exposes SSR/RSC-safe helpers (headers, fetch-ssr-data, normalize-url) with no client-only imports, giving the package a clear client/server boundary.

Tech Stack Written in TypeScript against a broad React peer range (16.8 through 19, including RC builds), built with rslib/Rspack for dual ESM+CJS output and CSS Modules, and orchestrated with Bun and Turborepo across the monorepo’s fifteen-plus packages. It depends on sibling workspace packages @c15t/ui for themed primitives and generateThemeCSS, and the framework-agnostic c15t core package for the consent runtime, store, and translation utilities. Testing runs on Vitest with @vitest/browser and MSW for network mocking, Biome handles linting/formatting, and a genversion prebuild step stamps the release version into src/version.ts before each build.

Code Quality The package carries over fifty test files, including unit tests for hooks and server utilities plus screenshot/snapshot tests for provider hydration and error states, organized into colocated tests directories. A dedicated test:types script runs a separate tsconfig.type-tests.json to catch type regressions independent of the build, and the tsconfig extends a shared @c15t/typescript-config preset. Hooks throw explicit, descriptive errors when used outside their required provider (e.g. useConsentManager), and comments call out non-obvious workarounds rather than leaving them unexplained, indicating an actively maintained codebase rather than one accumulating silent tech debt.

API Design The public surface is deliberately granular: consumers can import the full prebuilt UI from the package root, cherry-pick individual components or primitives via dedicated subpaths, drop to headless hooks for a fully custom UI, or pull in IAB TCF 2.3 support only when needed via a separate ./iab subpath, keeping non-IAB bundles free of that code. The same headless core is shared across sibling React, Next.js, Vue, Svelte, and Solid packages in the monorepo, so consent logic isn’t reimplemented per framework, and the three supported deployment modes (hosted, self-hosted, offline) are exposed through one consistent options API rather than divergent integration paths.