Einleitung

React-Intl ist eine quelloffene Bibliothek von Yahoo zur Internationalisierung von Webanwendungen und ein Teil von Format.js, welche weitere Module für die Internationalisierung bereitstellt, unter anderem für Ember und Handlebars. React-Intl greift dabei auf die integrierte Intl API von Javascript zurück und bietet dabei nicht nur die Möglichkeit die Webseite in eine andere Sprache zu übersetzen, sondern auch landestypische Konventionen durch verschiedene Methoden zu berücksichtigen.

In diesem deutschsprachigen Medium Artikel möchte ich einen übersichtlichen Einstieg durch ein kleines Beispiel geben und zeigen wie einfach die Lokalisierung einer React Webseite sein kann. Bei ausreichend Interesse gehe ich in zukünftigen Artikeln gerne weiter in die Tiefe.

Einrichtung

Zu Beginn erstellen wir eine React Anwendung dazu initialisieren wir mit

npm init react-app my-new-l18n-project

das Starter Projekt von React in dem Ordner ‘my-new-l18n-project’.

Anschließend installieren wir durch

npm install --save react-intl

die eigentliche Bibliothek.

Übersetzungen anlegen

Die Übersetzungen für alle verwendeten Sprachen werden als JSON hinterlegt und können über ihre Schlüssel (Keys) referenziert werden.

Intl Provider

Wenn wir das Projekt eingerichtet haben, gehts weiter mit der App.js wo wir als erstes den Intl Provider importieren, welcher als übergeordnete Komponente (HOC = High Order Component) den Context an die Kindelemente durchreicht, in unserem Fall die FirstComponent.

Wir übergeben dem Provider folgende drei Eigenschaften (Properties)

<IntlProvider 
 locale={locale} 
 messages={language === "en" ? langEN : langDE}
 textComponent="span"> 
 ...
</IntlProvider>

locale gibt an welche Sprache verwendet werden soll. Durch den Default “en” im useState Hook, wird beim initialen Laden der Seite die englische Sprache verwendet. Alternativ könnte auch ein useIntl Hook benutzt werden, welcher mit useIntl().locale die Browser locale ausliest. Die Übersetzungen werden mit einer Fallentscheidung an messages übergeben. Seit React-Intl v3 werden standartmässig die FormattedMessages mit einem React.Fragment gerendert. In unserem Beispiel möchten wir allerdings aus Styling gründen dafür <span(s)> benutzen. Deswegen geben wir bei textComponent “span” an.

Aufruf

Die “FirstComponent” Komponente rendert anschließend die Übersetzungen (Translations), außerdem besitzt sie einen rudimentären Switch um zwischen den Übersetzungen wechseln zu können. Durch ein useCallback wird der Wert an den Parent überreicht, welchen sich diesen in den State speichert und als locale benutzt.

Das Ergebnis:

Github: https://github.com/sho3it/medium_l18n_tutorial_project

Vielen Dank…