Cookies

@granit/cookies defines an abstract CookieConsentProvider interface and RGPD category types — mirroring Granit.Cookies on the .NET backend. @granit/react-cookies wraps this into a React context. @granit/cookies-klaro provides a concrete Klaro CMP adapter.

The architecture is pluggable: swap @granit/cookies-klaro for any other CMP (Cookiebot, OneTrust, etc.) by implementing CookieConsentProvider.

Peer dependencies: react ^19

Package structure

Directory@granit/cookies/ CMP interface, RGPD categories, backend DTOs (framework-agnostic)
- @granit/react-cookies CookieConsentProvider component, useCookieConsent hook
- @granit/cookies-klaro Klaro CMP adapter (static or dynamic config)

Package	Role	Depends on
`@granit/cookies`	`CookieConsentProvider` interface, `CookieCategory`, backend DTOs	—
`@granit/react-cookies`	React context provider, `useCookieConsent` hook	`@granit/cookies`, `react`
`@granit/cookies-klaro`	`createKlaroCookieConsentProvider()` factory	`@granit/cookies`, `klaro`

import { CookieConsentProvider } from '@granit/react-cookies';
import { createKlaroCookieConsentProvider } from '@granit/cookies-klaro';

const cmp = createKlaroCookieConsentProvider({
  loadConfig: () => fetch('/api/v1/cookies/config').then(r => r.json()),
});

function App({ children }) {
  return (
    <CookieConsentProvider provider={cmp}>
      {children}
    </CookieConsentProvider>
  );
}

import type {
  CookieCategory,
  CookieConsentProvider,
  ConsentState,
} from '@granit/cookies';

TypeScript SDK

Types

type CookieCategory = 'strictly_necessary' | 'preferences' | 'analytics' | 'marketing';

type ConsentState = Record<CookieCategory, boolean>;

interface CookieConsentProvider {
  init(): Promise<void>;
  getConsents(): ConsentState;
  onConsentChange(callback: (consents: ConsentState) => void): () => void;
  setConsent(category: CookieCategory, granted: boolean): void;
  setAllConsents(granted: boolean): void;
  hasConsented(): boolean;
}

Backend DTOs

interface CookieConsentConfig {
  readonly cookies: readonly CookieDefinitionDto[];
  readonly services: readonly ThirdPartyServiceDto[];
}

interface CookieDefinitionDto {
  readonly name: string;
  readonly category: CookieCategory;
  readonly retentionDays: number;
  readonly purpose: string;
}

interface ThirdPartyServiceDto {
  readonly name: string;
  readonly category: CookieCategory;
  readonly cookiePatterns: readonly string[];
}

The backend returns CookieConsentConfig from GET /api/v1/cookies/config. CMP adapters translate this into their own configuration format.

React bindings

`CookieConsentProvider` (component)

<CookieConsentProvider provider={cmp}>
  {children}
</CookieConsentProvider>

Initializes the CMP on mount and exposes consent state to the component tree.

`useCookieConsent()`

interface CookieConsentContextValue {
  consents: ConsentState;
  isLoaded: boolean;
  hasConsented: boolean;
  acceptCategory: (category: CookieCategory) => void;
  revokeCategory: (category: CookieCategory) => void;
  acceptAll: () => void;
  revokeAll: () => void;
}

function useCookieConsent(): CookieConsentContextValue;

strictly_necessary is always granted and cannot be revoked.

Klaro adapter

`createKlaroCookieConsentProvider(options)`

Creates a CookieConsentProvider backed by Klaro CMP.

interface CreateKlaroCookieConsentProviderOptions {
  readonly klaroConfig?: KlaroConfig;
  readonly serviceMappings?: readonly KlaroServiceMapping[];
  readonly loadConfig?: () => Promise<CookieConsentConfig>;
  readonly cookieName?: string;
}

interface KlaroServiceMapping {
  readonly name: string;
  readonly category: CookieCategory;
}

Two modes:

Static: Pass klaroConfig and serviceMappings directly
Dynamic: Pass loadConfig to fetch CookieConsentConfig from the backend API at init time

Public API summary

Category	Key exports	Package
Types	`CookieCategory`, `ConsentState`, `CookieConsentConfig`, `CookieDefinitionDto`	`@granit/cookies`
Interface	`CookieConsentProvider`	`@granit/cookies`
React provider	`CookieConsentProvider` (component)	`@granit/react-cookies`
React hook	`useCookieConsent()`	`@granit/react-cookies`
Klaro adapter	`createKlaroCookieConsentProvider()`	`@granit/cookies-klaro`