useLocaleSelector()

Aperçu

Ce hook retourne la locale actuelle, la liste des locales, ainsi que le hook useSetLocale(). Cela est conçu pour faciliter l'utilisation lors de la création de votre propre composant de sélection de langue.

Si vous ne souhaitez pas implémenter le vôtre, vous pouvez utiliser à la place le composant <LocaleSelector>.

Référence

Renvoie

Un objet contenant la locale actuelle, la liste des locales, et le hook useSetLocale().

Exemples

`<LocaleSelector>`

Voici l'exemple d'implémentation du composant <LocaleSelector>.

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>
  );
}

Notes

Ce hook est uniquement côté client.
En savoir plus sur les chaînes de localisation ici.

Prochaines étapes

En savoir plus sur le composant <LocaleSelector>.
En savoir plus sur le hook useLocale().