react i18next

React-i18next

WICHTIG:

Master Branch ist die neueste Version, die Hooks verwendet (>= v10).

$ > =v10.0.0
npm i react-i18next

React-Native: Um Hooks in React-Native zu verwenden, müssen Sie React-Native v0.59.0 oder höher verwenden

Für die Legacy-Version verwenden Sie bitte den Zweig v9.xx

$ v9.0.10 (legacy)
npm i react-i18next@legacy

Dokumentation

Die Dokumentation wird auf reagieren.i18next.com veröffentlicht und PR-Änderungen können hier bereitgestellt werden.

Die allgemeine i18next-Dokumentation ist auf www.i18next.com veröffentlicht und PR-Änderungen können hier mitgeteilt werden.

Wie wird mein Code aussehen?

Vorher: Ihr Reaktionscode hätte etwa so ausgesehen:

...
< div > Just simple content < / div >
< div >
  Hello < strong title = "this is your name" > { name } < / strong>, you have {count} unread message(s). <Link to=" / msgs ">Go to messages</Link>.
</div>
...

Nachher: ​​Mit der Trans-Komponente ändern Sie es einfach in:

...
< div > { t ( 'simpleContent' ) } < / div >
< Trans i18nKey = "userMessagesUnread" count = { count } >
  Hello < strong title = { t ( 'nameTitle' ) } > { { name } } < / strong>, you have {{count}} unread message. <Link to=" / msgs ">Go to messages</Link>.
</Trans>
...

Was andere sagen

• Wie man eine React-Anwendung mit i18next richtig internationalisiert von Adriano Raiano
• I18n mit React und i18next über Alligator.io von Danny Hurlburt
• Ultimative Lokalisierung der React (Mobx)-App mit i18next über itnext.io von Viktor Shevchenko
• Internationalisierung für React richtig gemacht. Nutzung des i18next i18n-Ökosystems über Reactjsexample.com
• So übersetzen Sie eine React-Anwendung mit React-i18next über codetain.co von Norbert Suski
• Building i18n mit Gatsby über gatsbyjs.org von Samuel Goudie
• Lassen Sie Ihre React.js-Anwendung stilvoll von Jan Mühlemann übersetzen
• Übersetzen Sie Ihre expo.io/react-native mobile Anwendung von Jan Mühlemann
• Gerne können Sie Ihre Geschichte teilen...

Warum i18next?

• Einfachheit: Sie müssen Ihre Webpack-Konfiguration nicht ändern oder zusätzliche Babel-Transpiler hinzufügen. Verwenden Sie einfach die Create-React-App und los geht's.
• Produktionsbereit Wir wissen, dass es für die Produktion mehr Anforderungen gibt als nur i18n auf der Clientseite, daher bieten wir auch auf der Serverseite umfassendere Unterstützung (nodejs, php, ruby, .net, ...). Einmal lernen – überall übersetzen .
• Beyond i18n wird mit locize geliefert, das die Lücke zwischen Entwicklung und Übersetzungen schließt und den gesamten Übersetzungsprozess abdeckt.

Lokalisierungsworkflow

Möchten Sie mehr darüber erfahren, wie reibungslos Ihr Internationalisierungs- und Übersetzungsprozess ablaufen kann?

Sehen Sie sich das Video an

Installation

Die Quelle kann über npm geladen oder von diesem Repo heruntergeladen werden.

 # npm package
$ npm install react-i18next

• Wenn Sie keinen Modullader verwenden, wird dieser zu window.reactI18next hinzugefügt

Möchten Sie eine ausführlichere Schritt-für-Schritt-Anleitung lesen?

Hier finden Sie ein einfaches Tutorial, wie Sie React-i18next am besten nutzen. Einige Grundlagen von i18next und einige coole Möglichkeiten zur Optimierung Ihres Lokalisierungsworkflows.

Beispiele

• Beispiel reagieren
• Reagieren Sie auf Beispiele mit Typoskript
• Beispiel locize.com

v9-Beispiele

• Beispiel reagieren
• Beispiel preact
• Beispiel React-Native
• Beispiel expo.io
• Beispiel next.js
• Beispiel Razzle
• Beispiel eines Hashbase-/Beaker-Browsers
• Beispielhaftes Bilderbuch
• Beispiel locize.com
• Beispieltest mit Scherz

Anforderungen

• reagieren >= 16.8.0
• React-Dom >= 16.8.0
• React-Native >= 0,59,0
• i18next >= 10.0.0 (Typescript-Benutzer: >=17.0.9)

v9

• reagieren >= 0.14.0 (im Fall von < v16 oder preact müssen Sie das übergeordnete Element in der Trans-Komponente oder global in den i18next.react-Optionen definieren)
• i18next >= 2.0.0

Hauptmitwirkende

Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):

Jan Mühlemann ?

Adriano Raiano ?

Pedro Durek ?

Tiger Abrodi ?

Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art sind willkommen!

---

Goldsponsoren

---

Lokalisierung als Service - locize.com

Benötigen Sie ein Übersetzungsmanagement? Möchten Sie Ihre Übersetzungen mit einem InContext-Editor bearbeiten? Verwenden Sie das Original, das Ihnen von den Betreuern von i18next zur Verfügung gestellt wurde!

Durch den Einsatz von locize unterstützen Sie direkt die Zukunft von i18next und React-i18next.

---