Core Documentation

Introduction

The c15t package is a powerful headless library that transforms privacy consent management into a fully observable system. Built with modern web applications in mind, it provides a robust foundation for implementing privacy-compliant consent management while giving developers complete control over the user interface.

Key Features

• 🎯 Zero UI Dependencies: A truly headless solution that doesn't impose any UI constraints
• ⚡️ High Performance: Optimized state management with minimal overhead
• 🔄 Real-time Updates: Instant state synchronization across your application
• 🛡️ Type-safe: Built with TypeScript for enhanced developer experience
• 📦 Lightweight: Small bundle size with zero dependencies
• 🔌 Framework Agnostic: Works with any JavaScript framework or vanilla JS

Why Use c15t?

• Headless Architecture: Provides the core logic and state management for consent without imposing any UI constraints, allowing developers to build custom interfaces tailored to their application's needs.
• Custom UI Development: Perfect for teams that want to design their own consent interfaces while leveraging robust backend logic.
• Flexibility and Control: Offers complete control over how consents are displayed and managed, enabling seamless integration with existing systems and workflows.

Installation

To install the package, use one of the following commands:

npm install c15t

Basic Setup

To create a consent manager store, import and use the createConsentManagerStore function. This store will handle all consent-related state and logic:

import { createConsentManagerStore } from 'c15t';
 
const store = createConsentManagerStore();
 
// Subscribe to state changes
const unsubscribe = store.subscribe(
  state => console.log('Consent updated:', state.consents)
);
 
// Update consent
store.getState().setConsent('analytics', true);

State Management

The store provides several methods to manage consent states:

// Get current consent state
const analyticsConsent = store.getState().consents.analytics;
 
// Subscribe to specific consent changes
const unsubscribe = store.subscribe(
  state => {
    if (state.consents.analytics) {
      // Initialize analytics
    }
  }
);
 
// Batch update multiple consents
store.getState().setConsents({
  analytics: true,
  marketing: false
});
 
// Save current consent state
store.getState().saveConsents();

Best Practices

1. Early Initialization: Initialize the consent manager as early as possible in your application lifecycle.

   // In your app's entry point
   const store = createConsentManagerStore();

2. Consent Persistence: Always handle consent persistence properly:

    const store = createConsentManagerStore();
    
   // Save consents when user confirms choices
   function handleConsentConfirmation() {
     store.getState().saveConsents();
   }

Example Implementation using Vanilla JavaScript

This is a basic example of how to implement the consent manager store to create a cookie banner using vanilla JavaScript.

Use Cases

1. Custom Consent UI: Use the core library to manage consent logic while building a custom UI that matches your application's design language.
2. Integration with Analytics: Seamlessly integrate consent management with analytics tools to ensure compliance with privacy regulations.
3. Dynamic Consent Management: Adjust consent options dynamically based on user location or preferences, using the library's flexible API.

Managing Consents

You can manage user consents using various methods provided by the store:

import { createConsentManagerStore } from 'c15t';
 
const store = createConsentManagerStore();
 
store.getState().setConsent('marketing', true);