Store API Overview

Entry Points

`getOrCreateConsentRuntime(options)`

The recommended entry point. Creates both a consent client and a Zustand vanilla store in one call, with built-in caching — calling it again with the same options returns the same instance.

import { getOrCreateConsentRuntime } from 'c15t';

const { consentManager, consentStore, cacheKey } = getOrCreateConsentRuntime({
  mode: 'c15t',
  backendURL: 'https://your-instance.c15t.dev',
  consentCategories: ['necessary', 'measurement', 'marketing'],
  scripts: [
    {
      id: 'analytics',
      src: 'https://cdn.example.com/analytics.js',
      category: 'measurement',
    },
  ],
  callbacks: {
    onConsentSet: ({ preferences }) => console.log('Consent:', preferences),
  },
  debug: true,
});

Returns: { consentManager, consentStore, cacheKey }

consentManager — The low-level client instance
consentStore — Zustand vanilla store with all state and actions
cacheKey — Cache key for this runtime instance

`configureConsentManager(options)`

Lower-level API that creates only the client (no store). Use this when you need full control over store creation.

import { configureConsentManager, createConsentManagerStore } from 'c15t';

const manager = configureConsentManager({
  mode: 'c15t',
  backendURL: 'https://your-instance.c15t.dev',
});

const store = createConsentManagerStore(manager, {
  initialConsentCategories: ['necessary', 'measurement'],
  scripts: [{ id: 'analytics', src: '...', category: 'measurement' }],
  callbacks: { onConsentSet: ({ preferences }) => console.log(preferences) },
});

`createConsentManagerStore(manager, options)`

Creates a Zustand vanilla store from a client instance. Accepts all store configuration options.

import { createConsentManagerStore } from 'c15t';

const store = createConsentManagerStore(manager, {
  initialConsentCategories: ['necessary', 'measurement', 'marketing'],
  debug: true,
  reloadOnConsentRevoked: true,
});

Store Patterns

Reading State

const state = consentStore.getState();

// Consent state
state.consents; // { necessary: true, measurement: false, ... }
state.has('measurement'); // false
state.hasConsented(); // false (no consent given yet)
state.model; // 'opt-in' | 'opt-out' | 'iab' | null

// UI state
state.activeUI; // 'banner' | 'dialog' | 'none'
state.consentTypes; // [{ name: 'necessary', ... }, ...]

// Location and info
state.locationInfo; // { countryCode: 'DE', regionCode: 'BY' }
state.hasFetchedBanner; // true (init complete)

Subscribing to Changes

// Subscribe to all state changes
const unsubscribe = consentStore.subscribe((state, prevState) => {
  console.log('State changed:', state);
});

// React to specific changes by comparing with previous state
consentStore.subscribe((state, prevState) => {
  if (state.consents !== prevState.consents) {
    console.log('Consents changed:', state.consents);
  }
});

// Unsubscribe when done
unsubscribe();

Window Namespace

The store is also exposed on the window object for debugging and direct access:

// Access from anywhere (e.g., browser console)
const state = window.c15tStore?.getState();
console.log(state?.consents);

The namespace defaults to c15tStore and can be configured via the namespace store option.

Options Reference

Property

Types

Loading…