useLocaleSelector()

Vue d'ensemble

Ce hook renvoie la locale actuelle, la liste des locales, et le hook useSetLocale(). Ceci est destiné à une utilisation facile lors de la création de votre propre composant de sélection 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 langue actuelle, la liste des langues, et le hook useSetLocale().

Exemples

`<LocaleSelector>`

Ceci est l'implémentation d'exemple 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>
  );
}

Remarques

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

Prochaines étapes

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