Skip to main content
Docs

Translations

The cookies-consent package includes built-in translations and supports custom translations.

Built-in Translations​

Available Languages​

LanguageKeyImport
EnglishendefaultTranslations.en
GermandedefaultTranslations.de

Usage​

import { ConsentProvider, defaultTranslations } from "@elcto/cookies-consent";

function App() {
  const locale = "de"; // From your i18n setup

  return (
    <ConsentProvider translations={defaultTranslations[locale]}>
      {children}
    </ConsentProvider>
  );
}

Translation Structure​

Main Strings​

{
  "title": "Hmm, delicious Cookies",
  "description": "This website uses cookies...",
  "acceptAll": "Accept All",
  "essentialOnly": "Essential Only",
  "learnMore": "Learn more",
  "customize": "Customize",
  "savePreferences": "Save Preferences",
  "back": "Back",
  "floatingButtonTooltip": "Cookie Settings",
  "footerLinks": {
    "privacy": "Privacy",
    "contact": "Contact",
    "imprint": "Imprint"
  }
}

Category Structure​

Each category includes:

{
  "categories": {
    "essential": {
      "title": "Essential",
      "description": "These cookies are required for the website to function and cannot be disabled.",
      "required": true,
      "cookies": [
        {
          "name": "__Secure-*.session-token",
          "purpose": "Keeps you signed in securely",
          "duration": "30 days"
        }
      ]
    }
  }
}

Custom Translations​

Full Custom Translation​

import { ConsentProvider, type ConsentTranslations } from "@elcto/cookies-consent";

const customTranslations: ConsentTranslations = {
  title: "Cookie Notice",
  description: "We use cookies to enhance your experience.",
  acceptAll: "Accept All Cookies",
  essentialOnly: "Necessary Only",
  learnMore: "Read More",
  customize: "Manage Preferences",
  savePreferences: "Save My Choices",
  back: "Go Back",
  floatingButtonTooltip: "Manage Cookies",
  footerLinks: {
    privacy: "Privacy Policy",
    contact: "Contact Us",
    imprint: "Legal Notice",
  },
  categories: {
    essential: {
      title: "Strictly Necessary",
      description: "Required for the website to work.",
      required: true,
      cookies: [
        // Your cookie list
      ],
    },
    functional: {
      title: "Preference Cookies",
      description: "Remember your settings.",
      required: false,
      cookies: [],
    },
    statistics: {
      title: "Analytics Cookies",
      description: "Help us improve.",
      required: false,
      cookies: [],
    },
    marketing: {
      title: "Advertising Cookies",
      description: "Personalized ads.",
      required: false,
      cookies: [],
    },
  },
};

<ConsentProvider translations={customTranslations}>
  {children}
</ConsentProvider>

Extending Default Translations​

import { defaultTranslations, type ConsentTranslations } from "@elcto/cookies-consent";

const customTranslations: ConsentTranslations = {
  ...defaultTranslations.en,
  title: "We Value Your Privacy",
  description: "Custom description here...",
};

Adding New Languages​

  1. Create a new translation file:
// shared/cookies-consent/src/i18n/fr.json
{
  "title": "Nous utilisons des cookies",
  "description": "...",
  // ... rest of translations
}
  1. Export from i18n index:
// shared/cookies-consent/src/i18n/index.ts
import { en } from "./en";
import { de } from "./de";
import fr from "./fr.json";

export const defaultTranslations: Record<string, ConsentTranslations> = {
  en,
  de,
  fr,
};
  1. Use in your app:
const translations = defaultTranslations[locale] ?? defaultTranslations.en;

Add or modify cookies in any category:

const customTranslations = {
  ...defaultTranslations.en,
  categories: {
    ...defaultTranslations.en.categories,
    functional: {
      ...defaultTranslations.en.categories.functional,
      cookies: [
        ...defaultTranslations.en.categories.functional.cookies,
        {
          name: "my_custom_cookie",
          purpose: "Stores your custom preference",
          duration: "1 year",
        },
      ],
    },
  },
};