Helpers
useLocaleSelector
API-Referenz für den Hook useLocaleSelector
Übersicht
Dieser Hook gibt die aktuelle locale, die Liste der locales, den Hook useSetLocale und eine Funktion zum Abrufen von locale-Eigenschaften zurück.
Er ist für die einfache Verwendung beim Erstellen einer eigenen LocaleSelector-Komponente gedacht.
Wenn du keine eigene implementieren möchtest, kannst du stattdessen die Komponente <LocaleSelector> verwenden.
Referenz
Rückgabe
Ein Objekt mit der aktuellen locale, der Liste der locales, dem useSetLocale-Hook und einer Funktion zum Abrufen von locale‑Eigenschaften.
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 des Locale-Auswählers abrufen
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Anzeigenamen ermitteln
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Wenn keine Locales zurückgegeben werden, nichts rendern oder elegant behandeln
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Standardwert: leerer String, wenn currentLocale nicht definiert ist
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Optionaler Standardwert, wenn kein Locale festgelegt ist */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Hinweise
- Dieser Hook ist nur clientseitig verfügbar.
- Weitere Informationen zu Locale-Strings findest du hier.
Nächste Schritte
- Erfahre mehr über die Komponente
<LocaleSelector>. - Erfahre mehr über den Hook
useLocale.
Wie ist diese Anleitung?