React i18n, automatisiert

Funktionsweise

localize.dev liest jede .tsx- und .jsx-Datei, findet die Texte, die die Benutzer sehen (Text, Attribute wie placeholder und aria-label, aus Ternäroperatoren gerenderte Zeichenfolgen) und schreibt sie in t()-Aufrufe mit Schlüsseln um, die nach der Funktion des Textes benannt sind.

Pluralformen werden zu einer Nachricht mit jeder Form, die jede Sprache benötigt, und Sätze um Links bleiben mit <Trans> erhalten. Ein Satz mit zwei Zählungen („3 Dateien in 2 Ordnern“) erhält ein Plural pro Zählung, und Ordnungszahlen (ordinal(place) → „1st“, „2nd“) werden zu i18next-Ordinalzahlen in den jeweiligen Sprachformen.

Daten, Zahlen und Preise, die auf eine Locale festgelegt sind (toLocaleDateString('en-US'), ` $${price} `), werden so umgeschrieben, dass sie auch der Sprache der App folgen.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

export function Inbox({ user, count }) {
  return (
    <section>
      <h1>Welcome back, {user.name}</h1>
      <p>{count} {count === 1 ? 'message' : 'messages'} waiting</p>
      <input placeholder="Search messages" />
      <p>Read the <a href="/help">help center</a> first.</p>
    </section>
  );
}

import { useTranslation, Trans } from 'react-i18next';

export function Inbox({ user, count }) {
  const { t } = useTranslation();
  return (
    <section>
      <h1>{t('inbox.welcome_back', { name: user.name })}</h1>
      <p>{t('inbox.messages_waiting', { count })}</p>
      <input placeholder={t('inbox.search_messages')} />
      <p><Trans i18nKey="inbox.read_the_help_center_first" components={{ a: <a href="/help" /> }} /></p>
    </section>
  );
}

{
  "inbox": {
    "welcome_back": "Welcome back, {{name}}",
    "messages_waiting_one": "{{count}} message waiting",
    "messages_waiting_other": "{{count}} messages waiting",
    "search_messages": "Search messages",
    "read_the_help_center_first": "Read the <a>help center</a> first."
  }
}

Was das Setup hinzufügt

Der erste Durchlauf richtet react-i18next ein, falls das Projekt es noch nicht hat:

• i18next und react-i18next zu package.json hinzugefügt (die GitHub Action aktualisiert auch die Lockfile)
• src/i18n.ts, das jede Locale-Datei lädt und die Sprache aus einer gespeicherten Auswahl auswählt, dann der Browser
• Ein Import davon in Ihrer Einstiegsdatei und ein <LanguageSwitcher />, den Sie in Ihrer Kopfzeile platzieren können

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.