@c-a-f/i18n

Framework-agnostic internationalization interfaces and adapters for CAF. Works with i18next, vue-i18n, ngx-translate, react-intl, next-intl, or the native Intl API.

Installation

npm install @c-a-f/i18n

For a specific library (optional peer):

npm install i18next
# or vue-i18n | @ngx-translate/core | react-intl | next-intl

Features

Feature	Description
ITranslator	Interface: translate(key, options?), getCurrentLanguage(), changeLanguage(lang), exists(key).
TranslationManager	Convenience API: t(key), translateWithValues(key, values), translatePlural(key, count), changeLanguage(lang).
I18nextTranslator	Adapter for i18next. (@c-a-f/i18n/i18next)
VueI18nTranslator	Adapter for vue-i18n. (@c-a-f/i18n/vue-i18n)
NgxTranslateTranslator	Adapter for @ngx-translate/core. (@c-a-f/i18n/ngx-translate)
ReactIntlTranslator	Adapter for react-intl. (@c-a-f/i18n/react-intl)
NextIntlTranslator	Adapter for next-intl. (@c-a-f/i18n/next-intl)
IntlApiTranslator	Adapter using native Intl / custom translations map. (@c-a-f/i18n/intl-api)

Core usage

import { TranslationManager, ITranslator } from '@c-a-f/i18n';

const translationManager = new TranslationManager(translator);

const greeting = translationManager.t('common.greeting');
const welcome = translationManager.translateWithValues('user.welcome', { name: 'John' });
const items = translationManager.translatePlural('cart.items', 5);
await translationManager.changeLanguage('fa');

i18next

import i18n from 'i18next';
import { I18nextTranslator } from '@c-a-f/i18n/i18next';
import { TranslationManager } from '@c-a-f/i18n';

await i18n.init({
  resources: { en: { translation: { greeting: 'Hello' } }, fa: { translation: { greeting: 'سلام' } } },
  lng: 'en',
});

const translator = new I18nextTranslator(i18n);
const translationManager = new TranslationManager(translator);
const greeting = translationManager.t('greeting');
await translationManager.changeLanguage('fa');

vue-i18n

import { createI18n } from 'vue-i18n';
import { VueI18nTranslator } from '@c-a-f/i18n/vue-i18n';

const i18n = createI18n({ locale: 'en', messages: { en: { greeting: 'Hello' }, fa: { greeting: 'سلام' } } });
const translator = new VueI18nTranslator(i18n.global);
const translationManager = new TranslationManager(translator);

ngx-translate

import { NgxTranslateTranslator } from '@c-a-f/i18n/ngx-translate';

const translator = new NgxTranslateTranslator(translateService);
const translationManager = new TranslationManager(translator);

react-intl

import { ReactIntlTranslator } from '@c-a-f/i18n/react-intl';

const translator = new ReactIntlTranslator(intl);
const translationManager = new TranslationManager(translator);

next-intl

import { NextIntlTranslator } from '@c-a-f/i18n/next-intl';

const translator = new NextIntlTranslator(t, locale);
const translationManager = new TranslationManager(translator);

Intl API (no extra dependency)

import { IntlApiTranslator, TranslationsMap } from '@c-a-f/i18n/intl-api';

const translations: TranslationsMap = {
  en: { 'common.greeting': 'Hello', 'common.welcome': 'Welcome {{name}}' },
  fa: { 'common.greeting': 'سلام', 'common.welcome': 'خوش آمدید {{name}}' },
};

const translator = new IntlApiTranslator('en', translations);
const translationManager = new TranslationManager(translator);
translator.addTranslations('fr', { 'common.greeting': 'Bonjour' });
const languages = translator.getAvailableLanguages();

Custom translator

Implement ITranslator for any i18n library and use it with TranslationManager.

Exports

• Main: ITranslator, TranslationOptions, TranslationManager
• Subpaths: /i18next, /vue-i18n, /ngx-translate, /react-intl, /next-intl, /intl-api

Dependencies

• @c-a-f/core — Core primitives
• Optional peers: i18next, vue-i18n, @ngx-translate/core, react-intl, next-intl