Sprache wechseln
So konfigurieren und wechseln Sie Sprachen in Ihrer React-App
Das Umschalten der Sprache ermöglicht es Nutzerinnen und Nutzern, das bevorzugte locale für die Inhalte Ihrer Anwendung festzulegen. GT React bietet mehrere Ansätze – von einfachem programmgesteuertem Umschalten bis hin zu vorgefertigten UI‑Komponenten für benutzerdefinierte Sprachwähler.
Verfügbare Methoden
- Programmgesteuert:
useSetLocale-Hook für benutzerdefinierte Steuerelemente - Vorgefertigte UI:
<LocaleSelector>-Komponente mit Dropdown - Benutzerdefinierte UI:
useLocaleSelector-Hook zum Erstellen benutzerdefinierter Auswahlkomponenten
Verwendung des useSetLocale-Hooks
Der useSetLocale-Hook ermöglicht es, die Sprache Ihrer App zu ändern:
import { useSetLocale } from 'gt-react';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>Locale festlegen</button>;
}Gib einfach das locale, zu dem du wechseln möchtest, als Argument an die vom Hook zurückgegebene Funktion.
Verwendung der <LocaleSelector>-Komponente
Die <LocaleSelector>-Komponente stellt ein einsatzbereites Dropdown bereit, das automatisch alle konfigurierten locales anzeigt:
import { LocaleSelector } from 'gt-react';
export default function MyComponent() {
return <LocaleSelector />;
}Diese Komponente erledigt automatisch Folgendes:
- Zeigt alle für Ihr Projekt konfigurierten Locales an
- Zeigt Locales in ihren nativesprachlichen Namen an
- Übernimmt die Umschaltlogik
- Hält die aktuelle Auswahl aufrecht
Verwendung des useLocaleSelector-Hooks
Wenn Sie eine eigene benutzerdefinierte Locale-Auswahlkomponente erstellen möchten, verwenden Sie useLocaleSelector:
import { useLocaleSelector } from 'gt-react';
function CustomLocaleSelector() {
const {
locale, // Aktuelles locale (z. B. ‚en', ‚es')
locales, // Array der locales, die Ihr Projekt unterstützt [‚en', ‚es', ‚fr']
setLocale, // Funktion zum Ändern des locale: setLocale(‚es')
getLocaleProperties // Funktion zum Abrufen von Anzeigeinformationen für ein locale
} = useLocaleSelector();
if (!locales?.length) return null;
return (
<select
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{locales.map((loc) => {
const props = getLocaleProperties(loc);
return (
<option key={loc} value={loc}>
{props.nativeNameWithRegionCode} {/* z. B. „English (US)", „Español (ES)" */}
</option>
);
})}
</select>
);
}Wichtige Hinweise
Voraussetzung für den GTProvider
Sprachumschalt-Komponenten müssen innerhalb eines <GTProvider> verwendet werden:
// ✅ Korrekt
<GTProvider>
<LanguageSwitcher />
</GTProvider>
// ❌ Falsch – außerhalb des Providers
<LanguageSwitcher />Nächste Schritte
- Leitfaden zu dynamischen Inhalten – Übersetzung von Inhalten zur Laufzeit
- API Reference:
Wie ist diese Anleitung?