React

Integrieren Sie i1n mit React unter Verwendung des i1n SDK oder des Bridge-Modus mit i18next / react-intl.

Einrichtung

Führen Sie i1n init in Ihrem React-Projekt aus. Das CLI erkennt automatisch react-i18next oder i18next, falls vorhanden, und konfiguriert das verschachtelte JSON-Format.

Sie können das i1n SDK im Standalone-Modus verwenden (ersetzt i18next vollständig) oder es über den Bridge-Modus verbinden, um Ihre vorhandene Bibliothek beizubehalten.

Eigenständiger Modus

Verwenden Sie das i1n React Provider-Muster für ein Plug-and-Play-Erlebnis. Initialisieren Sie mit init(), erstellen Sie einen I1nProvider, der den Locale-Status mit dem SDK synchronisiert, und verwenden Sie den useI1n()-Hook in Ihren Komponenten.

Dieser Ansatz bietet eine persistente Locale-Auswahl über localStorage, Laufzeit-Sprachwechsel mit setLocale() und eine vollständig typsichere Autovervollständigung über die generierte i1n.d.ts — keine externe i18n-Bibliothek erforderlich.

Bridge-Modus mit i18next

Wenn Ihr Projekt i18next verwendet, verbinden Sie es mit einer Zeile: registerI1n((key, params) => i18next.t(key, params)). Die i1n t()-Funktion delegiert jetzt an i18next im Hintergrund, jedoch mit strenger Typüberprüfung und Autovervollständigung.

Für Projekte, die react-intl (FormatJS) verwenden, nutzen Sie: registerI1n((key, params) => intl.formatMessage({ id: key }, params)). Der Bridge-Modus funktioniert mit jeder Übersetzungsfunktion – übergeben Sie einen beliebigen Callback (key, params) => string an registerI1n().

Bereitstellung

Fügen Sie i1n pull zu Ihrem Build-Schritt oder Ihrer CI/CD-Pipeline hinzu. Die generierten Übersetzungsdateien und i1n.d.ts werden in Ihrem Repository committet.

Funktioniert mit Vite, Create React App, Remix und jedem React-basierten Framework.

src/App.tsx

import { useTranslation } from 'react-i18next'

function App() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

Bridge Mode — i18next

import { registerI1n } from 'i1n'
import i18next from 'i18next'

registerI1n((key, params) => i18next.t(key, params))

Bridge Mode — react-intl

import { registerI1n } from 'i1n'
import { useIntl } from 'react-intl'

const intl = useIntl()
registerI1n((key, params) => intl.formatMessage({ id: key }, params))

Verwandt

Armaturenbrett

Leitfaden für das i1n-Web-Dashboard: Kontoerstellung, Organisationen, API-Schlüssel, Übersetzungsbearbeitung und Teamverwaltung.

Bridge-Modus

Behalten Sie Ihre bestehende i18n-Bibliothek bei und fügen Sie gleichzeitig die typsichere Autovervollständigung, KI-Übersetzung und Dateiverwaltung von i1n hinzu.