useLocaleSelector()

Übersicht

Dieser Hook gibt die aktuelle Sprache, die Liste der Sprachen und den useSetLocale() Hook zurück. Dies ist für die einfache Verwendung gedacht, wenn Sie Ihre eigene Sprachwahlkomponente erstellen.

Wenn Sie Ihre eigene nicht implementieren möchten, können Sie stattdessen die <LocaleSelector> Komponente verwenden.

Referenz

Rückgaben

Ein Objekt, das die aktuelle Sprache, die Liste der Sprachen 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>
  );
}

Notizen

Dieser Hook ist nur clientseitig.
Erfahren Sie mehr über Locale-Strings hier.

Nächste Schritte

Erfahren Sie mehr über die <LocaleSelector> Komponente.
Erfahren Sie mehr über den useLocale() Hook.