Helpers
useLocaleSelector
API-Referenz für den useLocaleSelector-Hook
Übersicht
Dieser Hook gibt die aktuelle locale, die Liste der locales sowie den Hook useSetLocale zurück.
Das erleichtert die Verwendung beim Erstellen einer eigenen locale-Auswahlkomponente.
Wenn du keine eigene implementieren möchtest, kannst du stattdessen die Komponente <LocaleSelector> verwenden.
Referenzen
Rückgabewert
Ein Objekt mit der aktuellen locale, der Liste der locales und dem Hook useSetLocale.
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 {
// Eigenschaften des Locale-Selectors 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 abfangen
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 gesetzt ist */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Hinweise
- Dieser Hook ist nur clientseitig.
- Erfahren Sie hier mehr über Locale-Strings: hier.
Nächste Schritte
- Erfahre mehr über die Komponente
<LocaleSelector>. - Erfahre mehr über den Hook
useLocale.
Wie ist diese Anleitung?