i18next
und dessen React-Bindings react-i18next
.react-intl
und react-i18next
gearbeitet, habe die anderen Alternativen ausführlich evaluiert und bin der festen Überzeugung, dass i18next in vielerlei Hinsicht die beste der genannten Alternativen darstellt. Es existiert eine sehr große und aktive Community rund um i18next, es werden neben React auch noch viele andere Frameworks, Libraries und Plattformen unterstützt, es läuft ohne großen Aufwand sowohl clientseitig im Browser als auch serverseitig in Node.js und das Übersetzungsformat von i18next wird von so ziemlich allen großen online Übersetzungs-Services als Exportformat angeboten.i18next
das Internationalisierungs-Framework selbst, sowie mit react-i18next
dessen React Bindings, also sozusagen eine Reihe an Komponenten und Funktionen, die uns die Arbeit mit i18next in React deutlich erleichtern. Nach dem Prinzip, das wir schon im Kapitel zu State Management mit redux
und react-redux
kennengelernt haben.ReactDOM.render()
-Aufruf übergeben.i18next
-Paket selbst, sowie den benannten Export initReactI18next
aus dem react-i18next
-Paket:.use()
-Methode, um das React Plugin an i18next zu übergeben, sowie die .init()
-Methode, um i18next zu initialisieren:init()
-Methode erwartet dabei ein Config-Objekt, das mindestens die beiden Eigenschaften lng
(für die ausgewählte Sprache) sowie resources
(für die Übersetzungen selbst) beinhalten sollte. Darüber hinaus ist es oft sinnvoll, eine fallbackLng
zu erstellen, also eine Fallback-Sprache, die dann benutzt wird, wenn eine Übersetzung in der ausgewählten Sprache nicht vorhanden ist. Insgesamt bietet i18next hier über 30 verschiedene Konfigurationsoptionen an, doch die genannten drei sind die, die uns für den Moment interessieren:resources
-Objekt, das etwas Erläuterung bedarf. Das Objekt hat die Form:de
für Deutsch sein, en
für Englisch oder auch de-AT
für deutsch mit österreichischer Regionalisierung. Die Eigenschaft besitzt als Wert ein Objekt, bestehend aus mindestens einem bis zu theoretisch unbegrenzt vielen Namespaces.translation
, dies kann aber durch die defaultNS
-Option im Konfigurationsobjekt der .init()
-Methode geändert werden. Der Namespace ist dabei selbst wiederum ein Objekt, das letztendlich die eigentlichen Übersetzungen enthält in der Form translationKey: value
, also etwa greeting: 'Hallo Welt!'
.withTranslation
-HOC für die Verwendung mit Klassen-Komponenten, einen useTranslation
-Hook zur Verwendung in Function Components und für Fälle, in denen wir Komponenten innerhalb von Übersetzungen nutzen, wollen gibt uns react-i18next
auch eine entsprechende Trans
-Komponente an die Hand.withTranslation()
-Funktion an. Diese erzeugt uns eine HOC an die wir die zu übersetzende Komponente übergeben und bekommen daraufhin die Props t
und i18n
in diese hereingereicht. Dazu importieren wir die Funktion zuerst als benannten Export aus dem react-i18next
-Paket:withTranslation()
-Funktion übergeben:withTranslation()
-HOC beim Export um die Komponente zu legen:t
, i18n
und tReady
.t
-Funktion ist dabei die zentrale Funktion für alles was mit Übersetzungen zu tun hat. Sie bekommt einen Translation Key übergeben und gibt uns den übersetzten Wert zurück, basierend auf unserer aktuell eingestellten Sprache:i18n
Prop enthält die zuvor initialisierte i18next-Instanz. Sie bietet uns einige Eigenschaften und Methoden, die für unsere Übersetzungen relevant sein können. Die beiden wichtigsten sind dabei sicherlich:i18n.language
, um die aktuell ausgewählte Sprache auszuleseni18n.changeLanguage()
, um die ausgewählte Sprache zu ändernen
in de
zu ändern, kann hier der Aufruf von i18n.changeLanguage('de')
benutzt werden.withTranslation()
-HOC benutzt werden sondern auch Function Components. Allerdings können wir in letzteren auch den useTranslation()
-Hook verwenden, der die Komponente meist noch etwas übersichtlicher werden lässt. Dazu importieren wir den Hook wie auch die HOC ebenfalls aus dem react-i18next
-Paket:t
und i18n
aus ihm extrahieren:withTranslation()
-HOC ist t
hier die Funktion, um Übersetzungen über ihren Translation Key auszugeben und i18n
die i18next-Instanz. Der Hook stellt also exakt die gleiche Funktionalität bereit wie auch die HOC, ist in Function Components aber deutlich übersichtlicher, weil expliziter. Um bestimmte Namespaces zu verwenden, können dem Hook wie schon der withTranslation()
-Funktion ein String oder ein Array mit Strings übergeben werden:Link
-Komponente vom React Router nutzen, um innerhalb einer Übersetzung auf eine andere URL zu verlinken. Das ist nur durch die Verwendung der t()
-Funktion nicht ohne weiteres möglich. Hierzu stellt uns react-i18next
die Trans
-Komponente bereit. Die Verwendung ist nicht immer ganz einfach zu verstehen, aber sie ist ein sehr mächtiges Werkzeug.Link
-Komponente verwenden. Der Code sieht vor der Übersetzung also in etwa so aus:<Link>
um die Link-Komponente aus dem React-Router Paket handelt.Trans
-Komponente. Übersetzungen, die mit dieser Komponente verwendet werden, können nummerierte Platzhalter besitzen. An ihrer Stelle werden Komponenten eingesetzt, die an gleicher Position in der Trans
-Komponente verwendet werden.Trans
an:Trans
-Element. Der Text dient dabei lediglich als Platzhalter, der verwendet wird, wenn es zu dem in der i18nKey
-Prop angegebenen Wert keine entsprechende Übersetzung gibt. Nun geht es ans Zählen. Wo welcher Text wie ersetzt wird und an welche Stelle eine Komponente tritt, ergibt sich aus dem Index-Wert der Kind-Elemente. Analog dazu, wie auch React.createElement()
funktioniert.<1>Terms and Conditions</1>
tritt also hier das <Link>
-Element, da es im Children-Array den Index-Wert 1 besitzt.react-i18next
zwei Möglichkeiten, um die Platzhalter automatisch zu generieren. Beide werden als Option beim Initialisieren von i18next gesetzt.saveMissing
auf true
und die Verwendung einer missingKeyHandler
-Funktion. Im folgenden Beispiel nutzen wir ein simples console.log()
, um fehlende Übersetzungen in die Browser-Konsole zu loggen:i18nKey
benutzt, der nicht existiert, wird stattdessen der Fallback-Wert, also der Wert aus dem Trans-Element in die Browser Konsole geschrieben:Link
wurde in der Ausgabe bereits durch den passenden Platzhalter-Index ersetzt, in diesem Fall also 1.missingKeyHandler
die debug
-Option auf true
setzen.missingKeyHandler
-Variante, dafür reicht es hier aber auch aus, lediglich eine Option auf true
zu setzen.<Trans>
-Elementen kann übrigens auch die t
-Funktion wie gewohnt verwendet werden. So wäre etwa auch Folgendes möglich:i18n.changeLanguage()
, t
, <Trans>
) ist es darüber hinaus relativ leicht zu erlernen.