react-intl (FormatJS): Der komplette Guide zu React Internationalisierung 2026

Schnelle Antwort

react-intl ist das React-Binding für FormatJS, das ICU Message Format Support für Internationalisierung bietet. Installieren mit npm install react-intl, App mit <IntlProvider locale="de" messages={messages}> wrappen, dann <FormattedMessage id="greeting" /> oder den useIntl() Hook verwenden.

---

Was ist react-intl?

react-intl ist Teil des FormatJS-Ökosystems, eine offizielle Implementierung des ICU Message Formats für JavaScript:

• ICU Message Format: Industrie-Standard-Syntax für Plurale, Gender und komplexe Nachrichten
• Eingebaute Formatter: Daten, Zahlen, Währungen, relative Zeit
• TypeScript Support: Type-sichere Message-Extraktion und -Formatierung
• Produktionserprobt: Genutzt von Yahoo, Microsoft, Airbnb

---

Grundlegendes Setup

Schritt 1: Übersetzungsdateien erstellen

de.json:

JSONCopy
1{
2  "app.greeting": "Willkommen in unserer Anwendung!",
3  "app.nav.home": "Startseite",
4  "app.buttons.submit": "Absenden"
5}

Schritt 2: IntlProvider konfigurieren

TSXCopy
1import { IntlProvider } from 'react-intl';
2import deMessages from './lang/de.json';
3
4function App() {
5  return (
6    <IntlProvider locale="de" messages={deMessages} defaultLocale="en">
7      <MainApp />
8    </IntlProvider>
9  );
10}

Schritt 3: FormattedMessage verwenden

TSXCopy
1import { FormattedMessage } from 'react-intl';
2
3function Header() {
4  return (
5    <header>
6      <h1><FormattedMessage id="app.greeting" /></h1>
7      <nav>
8        <a href="/"><FormattedMessage id="app.nav.home" /></a>
9      </nav>
10    </header>
11  );
12}

---

ICU Message Format

Variablen

JSONCopy
{
  "greeting": "Hallo, {name}!"
}

TSXCopy
<FormattedMessage id="greeting" values={{ name: user.name }} />

Pluralisierung

JSONCopy
{
  "items": "{count, plural, =0 {Keine Artikel} one {# Artikel} other {# Artikel}}"
}

TSXCopy
<FormattedMessage id="items" values={{ count: 5 }} />
// "5 Artikel"

Select (Gender, Auswahl)

JSONCopy
{
  "pronoun": "{gender, select, male {Er} female {Sie} other {Sie/Er}} hat Ihren Post geliked"
}

Rich Text (HTML-Komponenten)

JSONCopy
{
  "terms": "Mit der Anmeldung stimmen Sie unseren <link>Nutzungsbedingungen</link> zu"
}

TSXCopy
1<FormattedMessage
2  id="terms"
3  values={{
4    link: (chunks) => <a href="/terms">{chunks}</a>
5  }}
6/>

---

Eingebaute Formatter

Datumsformatierung

TSXCopy
1import { FormattedDate } from 'react-intl';
2
3<FormattedDate value={new Date()} year="numeric" month="long" day="2-digit" />
4// "17. Januar 2026"

Zahlenformatierung

TSXCopy
1import { FormattedNumber } from 'react-intl';
2
3// Währung
4<FormattedNumber value={99.99} style="currency" currency="EUR" />
5// "99,99 €"
6
7// Prozent
8<FormattedNumber value={0.25} style="percent" />
9// "25 %"

---

Der useIntl Hook

TSXCopy
1import { useIntl } from 'react-intl';
2
3function Form() {
4  const intl = useIntl();
5
6  const handleSubmit = () => {
7    const confirmMessage = intl.formatMessage({ id: 'app.confirm' });
8    if (confirm(confirmMessage)) {
9      // Formular absenden
10    }
11  };
12
13  return (
14    <form onSubmit={handleSubmit}>
15      <button type="submit">
16        {intl.formatMessage({ id: 'app.buttons.submit' })}
17      </button>
18    </form>
19  );
20}

---

TypeScript Integration

TypeScriptCopy
1// src/types/intl.d.ts
2import de from '../lang/de.json';
3
4type Messages = typeof de;
5
6declare global {
7  namespace FormatjsIntl {
8    interface Message {
9      ids: keyof Messages;
10    }
11  }
12}

Jetzt bietet TypeScript Autocomplete und validiert IDs:

TSXCopy
<FormattedMessage id="app.greeting" />  // ✅ Gültig
<FormattedMessage id="invalid.key" />   // ❌ TypeScript Fehler

---

Mit IntlPull integrieren

TerminalCopy
1# Messages extrahieren
2npx formatjs extract 'src/**/*.ts*' --out-file lang/extracted.json
3
4# Zu IntlPull hochladen
5npx @intlpullhq/cli upload --file lang/extracted.json --format icu
6
7# KI übersetzen
8npx @intlpullhq/cli translate --target de,es,fr
9
10# Übersetzungen herunterladen
11npx @intlpullhq/cli download --output lang/ --format json

---

Zusammenfassung

Bereit react-intl Übersetzungen zu verwalten? Starten Sie kostenlos mit IntlPull