---
id: "packages/active-i18n/translations"
title: "Translations"
description: "Keys, interpolation, CLDR plurals, missing keys and the typed translation contract."
url: "/packages/active-i18n/translations"
locale: "en"
revision: "88ffd64bad8e2fe5"
---

# Translations

**Example: Interpolation, plurals and a missing key**

Client: Runs entirely in your browser. Source: `examples/i18n/translator.tsx`.

```tsx
// apps/docs/examples/i18n/translator.tsx
'use client';

import {useState} from 'react';

import {
  createTranslateFunction,
  type LocaleTranslations,
} from '@workspace/active-i18n';
import {Button} from '@workspace/active-ui/components/primitives/button';
import {
  Tabs,
  TabsList,
  TabsTrigger,
} from '@workspace/active-ui/components/primitives/tabs';

// The host's dictionaries: one tree per language, keyed by namespace.
const DICTIONARIES: Record<'en' | 'nl' | 'ar', LocaleTranslations> = {
  en: {
    inbox: {
      greeting: 'Hello {{name}}',
      messages: {one: '{{count}} new message', other: '{{count}} new messages'},
    },
  },
  nl: {
    inbox: {
      greeting: 'Hallo {{name}}',
      messages: {
        one: '{{count}} nieuw bericht',
        other: '{{count}} nieuwe berichten',
      },
    },
  },
  ar: {
    inbox: {
      greeting: 'مرحبًا {{name}}',
      messages: {
        zero: 'لا توجد رسائل جديدة',
        one: 'رسالة جديدة واحدة',
        two: 'رسالتان جديدتان',
        few: '{{count}} رسائل جديدة',
        many: '{{count}} رسالة جديدة',
        other: '{{count}} رسالة جديدة',
      },
    },
  },
};

/** A translator per language: interpolation, CLDR plurals and a missing key. */
export default function Translator() {
  const [locale, setLocale] = useState<'en' | 'nl' | 'ar'>('en');
  const [count, setCount] = useState(2);
  // Filled while this render translates: the translator reports a miss
  // through the callback and still returns the raw key.
  const missing: string[] = [];
  const t = createTranslateFunction(DICTIONARIES[locale], locale, {
    onMissingKey: ({key}) => missing.push(key),
  });
  return (
    <div className="flex flex-col gap-4">
      <Tabs
        value={locale}
        onValueChange={(value) => setLocale(value as 'en' | 'nl' | 'ar')}
      >
        <TabsList aria-label="Language">
          <TabsTrigger value="en">English</TabsTrigger>
          <TabsTrigger value="nl">Nederlands</TabsTrigger>
          <TabsTrigger value="ar">العربية</TabsTrigger>
        </TabsList>
      </Tabs>
      <div
        lang={locale}
        dir={locale === 'ar' ? 'rtl' : 'ltr'}
        className="flex flex-col gap-1"
      >
        <p data-i18n-greeting>{t('inbox.greeting', {name: 'Ada'})}</p>
        <p data-i18n-count={count}>{t('inbox.messages', {count})}</p>
        <p className="text-muted-foreground font-mono text-sm">
          {t('inbox.archived')}
        </p>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((n) => Math.max(0, n - 1))}
        >
          Fewer
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((n) => n + 1)}
        >
          More
        </Button>
        <span className="text-muted-foreground text-sm">count = {count}</span>
      </div>
      <p className="text-muted-foreground text-sm">
        Missing keys reported:{' '}
        {missing.length > 0 ? missing.join(', ') : 'none'}
      </p>
    </div>
  );
}
```

## Keys

A key is a dot path whose first segment is the namespace: `inbox.messages` reads the `messages`
value of the `inbox` tree. A dictionary for one language is `LocaleTranslations`, an object keyed by
namespace.

## Interpolation

`{{name}}` is replaced with `String(value)`. `count` is always interpolated when it is a number.

```ts
t('inbox.greeting', {name: 'Ada'}); // 'Hello Ada'
```

## Plurals

A plural value is an object whose own keys are all CLDR categories: `zero`, `one`, `two`, `few`,
`many`, `other`. With a numeric `count`, `zero` is used for `0` when present, otherwise the category
`Intl.PluralRules` gives for the language, otherwise `other`. Arabic uses all six categories; the
example above shows them as you change the count.

## Missing keys and failures

- A missing key returns the raw key and calls `onMissingKey({key, locale})` once.
- An invalid path, a value that is not a string or a failed plural selection returns the raw key and
  calls `onWarning`; an exception returns the raw key and calls `onError`.
- Callback messages are stable English sentences; `key` and `locale` travel in `meta`.

```ts
const t = createTranslateFunction(dictionary, 'nl', {
  onMissingKey: ({key, locale}) => report(`missing ${locale}:${key}`),
});
```

## Typed keys

`TranslationCapability<PlainKey, Params>` is generic. A resource package of your application can
instantiate it with a generated union of its keys and the variables each key needs; a component
library keeps the untyped `TranslateFunction` and receives the host's translator.

## Names from CLDR

`getLanguageName`, `getStandaloneLanguageName`, `getCurrencyName`, `getCurrencyOptions` and
`getRegionName` read `Intl.DisplayNames` in the display language, with your own labels as a
fallback where the runtime has no name.