useLocaleSelector()

Aperçu

Ce hook retourne la locale actuelle, la liste des locales, le hook useSetLocale(), et une fonction pour récupérer les propriétés de locale. Ceci est conçu pour faciliter l'utilisation lors de la création de votre propre composant de sélecteur de locale.

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

Référence

Retours

Un objet contenant la locale actuelle, la liste des locales, le hook useSetLocale(), et une fonction pour récupérer les propriétés de locale.

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, getLocaleProperties } = 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().