Helpers
useLocaleSelector
API Reference für den useLocaleSelector-Hook
Überblick
Dieser Hook gibt die aktuelle locale, die Liste der locales sowie den Hook useSetLocale zurück.
Er ist für die einfache Nutzung gedacht, wenn Sie Ihre eigene Komponente zur Sprachauswahl erstellen.
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 und den Hook useSetLocale 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 {
// Locale-Selector-Eigenschaften abrufen
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Anzeigename ermitteln
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Falls keine Locales verfügbar sind, nichts rendern oder elegant behandeln
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Standardwert auf leeren String setzen, falls currentLocale undefined ist
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Optionaler Standardwert für den Fall, dass keine Locale gesetzt ist */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Hinweise
- Dieser Hook läuft ausschließlich clientseitig.
- Weitere Informationen zu Locale-Strings findest du hier.
Nächste Schritte
- Erfahren Sie mehr über die Komponente
<LocaleSelector>. - Erfahren Sie mehr über den Hook
useLocale.
Wie ist dieser Leitfaden?