Helpers
useLocaleSelector
API Reference für den useLocaleSelector-Hook
Überblick
Dieser Hook gibt die aktuelle locale, die Liste der locales, den Hook useSetLocale sowie eine Funktion zum Abrufen von locale‑Eigenschaften zurück.
Er erleichtert die Implementierung einer eigenen Komponente zur Sprachauswahl.
Wenn Sie keine eigene implementieren möchten, können Sie stattdessen die Komponente <LocaleSelector> verwenden.
Referenz
Rückgabewert
Ein Objekt, das die aktuelle locale, die Liste der locales, den useSetLocale-Hook und eine Funktion zum Abrufen von locale-Eigenschaften enthält.
Beispiele
<LocaleSelector>
Dies ist die Beispielimplementierung der Komponente <LocaleSelector>.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Eigenschaften für den Locale-Auswahler abrufen
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Anzeigenamen ermitteln
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Wenn keine Locales vorhanden sind, nichts rendern oder sauber abfangen
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Auf leeren String zurückfallen, wenn currentLocale undefined ist
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Optionaler Fallback, wenn kein Locale gesetzt ist */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Hinweise
- Dieser Hook ist nur clientseitig.
- Mehr zu Locale-Strings erfahren Sie hier.
Nächste Schritte
- Erfahren Sie mehr über die Komponente
<LocaleSelector>. - Erfahren Sie mehr über den Hook
useLocale.
Wie ist dieser Leitfaden?