Sprachwechsel
So konfigurieren und wechseln Sie Sprachen in Ihrer React-App
Der Sprachwechsel ermöglicht es Nutzern, die 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 eigene Steuerelemente - Vorgefertigte UI:
<LocaleSelector>-Komponente mit Dropdown - Eigene UI:
useLocaleSelector-Hook zum Erstellen eigener Auswahlelemente
Verwendung des useSetLocale-Hooks
Der useSetLocale-Hook ermöglicht es, die Sprache deiner App zu ändern:
import { useSetLocale } from 'gt-react';
export default function MyComponent() {
const setLocale = useSetLocale();
return <button onClick={() => setLocale('en')}>Locale setzen</button>;
}Geben Sie einfach die gewünschte locale, zu der gewechselt werden soll, als Argument an die vom Hook zurückgegebene Funktion.
Verwendung der <LocaleSelector>-Komponente
Die <LocaleSelector>-Komponente bietet ein einsatzbereites Dropdown, das automatisch alle konfigurierten locales anzeigt:
import { LocaleSelector } from 'gt-react';
export default function MyComponent() {
return <LocaleSelector />;
}This component automatically:
- Zeigt alle für Ihr Projekt konfigurierten locales an
- Zeigt locales in ihrer jeweiligen Eigenbezeichnung
- Übernimmt die Umschaltlogik
- Behält die aktuelle Auswahl bei
Verwenden des Hooks useLocaleSelector
Wenn Sie Ihre eigene, individuell angepasste Locale-Auswahlkomponente bauen möchten, verwenden Sie useLocaleSelector:
import { useLocaleSelector } from 'gt-react';
function CustomLocaleSelector() {
const {
locale, // Aktuell aktive Locale (z. B. 'en', 'es')
locales, // Array der von Ihrem Projekt unterstützten Locales ['en', 'es', 'fr']
setLocale, // Funktion zum Ändern der Locale: setLocale('es')
getLocaleProperties // Funktion zum Abrufen von Anzeigeinformationen für eine 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: GTProvider
Komponenten zum Sprachwechsel 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-Referenz:
Wie ist dieser Leitfaden?