React i18n einfach gemacht
Typsichere Internationalisierung für React‑Anwendungen mit Hooks, Context und nahtloser CDN‑Auslieferung.
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Features
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}Funktioniert mit beliebten React‑i18n‑Bibliotheken
Better i18n ersetzt Ihre Lieblings‑i18n‑Bibliothek nicht – es ist die Translation‑Management‑Schicht, die sie noch leistungsfähiger macht.
Better i18n + react-intl
Die beliebteste React‑i18n‑Bibliothek mit Unterstützung für das ICU‑Message‑Format. Von Tausenden Produktions‑Apps genutzt.
Better i18n synchronisiert Ihre Übersetzungen direkt ins react-intl‑JSON‑Format. Im Dashboard bearbeiten, Änderungen sofort in Ihrer App sehen.
Better i18n + react-i18next
Leistungsstarkes i18n‑Framework für React auf Basis von i18next. Features wie Namespaces, Interpolation und Plurals sind integriert.
Exportieren Sie in i18next‑kompatibles JSON mit Namespaces. Better i18n übernimmt den Übersetzungs‑Workflow, i18next das Runtime‑Handling.
Better i18n + FormatJS
Eine Bibliothekssammlung für Internationalisierung, die react-intl einschließt. Unterstützt ICU‑Message‑Syntax und CLDR‑Daten.
Better i18n unterstützt das ICU‑Message‑Format nativ. Verwalten Sie komplexe Plurals und Selects visuell und exportieren Sie ins FormatJS‑Format.
Better i18n + Lingui
Eine gut lesbare, automatisierte und optimierte i18n‑Bibliothek. Großartige DX mit macro‑basierter Message‑Extraktion.
Extrahieren Sie Messages mit der Lingui CLI, verwalten Sie Übersetzungen in Better i18n und synchronisieren Sie sie automatisch per GitHub‑Integration zurück.
Schnellstart
Starten Sie in Minuten mit Better i18n in Ihrer React‑App.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung Django wird mit einem ausgereiften Internationalisierungs-Framework (i18n) geliefert,...
Read more →Developer Experience im Detail: Wie Better i18n's Platform UX Lokalisierung schnell und intuitiv macht
Lokalisierungsplattformen haben den Ruf, unhandliche Oberflächen, langsame Editoren und Workflows zu haben, die wirken, als wären sie von einem Komitee...
Read more →Medienverwaltung mit Unsplash-Integration: Ein vollständiger CMS-Leitfaden
Die Verwaltung von Medien neben Übersetzungen war in den meisten i18n-Tools immer ein Nachgedanke. Sie übersetzen den Text und kümmern sich dann manuell...
Read more →Mit React‑i18n loslegen
Kostenloser Tarif verfügbar. Keine Kreditkarte erforderlich.