Helpers
useLocaleSelector()
API-Referenz für den useLocaleSelector-Hook
Übersicht
Dieser Hook gibt die aktuelle Locale, die Liste der Locales und den useSetLocale()
Hook zurück.
Er ist für die einfache Verwendung gedacht, wenn du deine eigene Locale-Auswahl-Komponente erstellen möchtest.
Wenn du keine eigene Implementierung erstellen möchtest, kannst du stattdessen die <LocaleSelector>
Komponente verwenden.
Referenz
Rückgabewert
Ein Objekt, das die aktuelle Locale, die Liste der Locales und den useSetLocale()
Hook enthält.
Beispiele
<LocaleSelector>
Dies ist die Beispielimplementierung der <LocaleSelector>
-Komponente.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Get locale selector properties
const { locale, locales, setLocale } = useLocaleSelector(
_locales ? _locales : undefined
);
// Get display name
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// If no locales are returned, just render nothing or handle gracefully
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Fallback to an empty string if currentLocale is undefined
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Optional fallback for when no locale is set */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}
Hinweise
- Dieser Hook ist nur clientseitig verfügbar.
- Erfahre mehr über Locale-Strings hier.
Nächste Schritte
- Erfahren Sie mehr über die
<LocaleSelector>
Komponente. - Erfahren Sie mehr über den
useLocale()
Hook.
Wie ist dieser Leitfaden?