Internationalization

Understanding the Translation System

c15t.com uses a simple yet powerful translation system that allows you to:

Provide translations for all UI text in multiple languages
Set a default language
Fall back to English when translations are missing

The translation system is built into the core package and is used by all components. Each component automatically uses the correct translations based on your configuration.

Basic Translation Setup

To provide your own translations, pass them through the ConsentManagerProvider configuration:

  import { ConsentManagerProvider } from '@c15t/react';
 
function App() {
  return (
    <ConsentManagerProvider
      initialGdprTypes={['necessary', 'marketing']}
      translationConfig={{
        translations: {
          de: {
            cookieBanner: {
              title: 'Wir respektieren Ihre Privatsphäre',
              description: 'Diese Website verwendet Cookies...',
              acceptAll: 'Alle akzeptieren',
              rejectAll: 'Alle ablehnen',
              customize: 'Anpassen',
            },
          },
        },
      }}
    >
      {/* Your app content */}
    </ConsentManagerProvider>
  );
}

Translation Structure

The translation object follows a specific structure with these main sections:

cookieBanner: Translations for the cookie consent banner
consentManagerDialog: Translations for the detailed consent management dialog
consentManagerWidget: Translations for the floating consent manager widget
consentTypes: Translations for different types of consent categories

Here's the complete structure of the translation object:

interface Translations {
  cookieBanner: {
    title: string;
    description: string;
    acceptAll: string;
    rejectAll: string;
    customize: string;
  };
  consentManagerDialog: {
    title: string;
    description: string;
    save: string;
    acceptAll: string;
    rejectAll: string;
    close: string;
  };
  consentManagerWidget: {
    title: string;
    description: string;
    save: string;
  };
  consentTypes: {
    necessary: {
      title: string;
      description: string;
    };
    functionality: {
      title: string;
      description: string;
    };
    marketing: {
      title: string;
      description: string;
    };
    measurement: {
      title: string;
      description: string;
    };
    experience: {
      title: string;
      description: string;
    };
  };
}

Best Practices

Complete Translations: Ensure you provide translations for all keys in your language object. Missing translations will fall back to English.
Testing: Test your translations in the actual UI to ensure text fits properly and doesn't break layouts.
Maintenance: Keep your translations in sync with the English version when updating to new versions of this package.

The defaultLanguage in the translation config determines which language to use. If translations for the specified language are not found or are incomplete, the system automatically falls back to English.

translationConfig: {
  defaultLanguage: 'fr', // Set French as default
  translations: {
    fr: {
      // French translations
    },
    // Other languages...
  }
}

Using Translations Programmatically

If you're building custom components that need to access translations, you can use the useTranslations hook:

import { useTranslations } from '@c15t/react';
 
function CustomComponent() {
  const translations = useTranslations();
  
  return (
    <div>
      <h2>{translations.cookieBanner.title}</h2>
      {/* Use other translation keys as needed */}
    </div>
  );
}

This hook automatically handles language selection and fallback behavior, ensuring your component always has access to the correct translations.