Helpers
useLocaleSelector
Référence de l’API du hook useLocaleSelector
Présentation
Ce hook renvoie la locale actuelle, la liste des locales, ainsi que le hook useSetLocale.
Il est conçu pour faciliter 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 le composant <LocaleSelector> à la place.
Références
Renvoie
Un objet contenant la locale en cours, la liste des locales et le hook useSetLocale.
Exemples
<LocaleSelector>
Voici un exemple d’implémentation du composant <LocaleSelector>.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Récupère les propriétés du sélecteur de langue
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Récupère le nom d’affichage
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Si aucune locale n’est trouvée, ne rien afficher ou gérer le cas proprement
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Repli sur une chaîne vide si currentLocale est indéfini
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Repli facultatif lorsque aucune locale n’est définie */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Notes
- Ce hook s’exécute uniquement côté client.
- En savoir plus sur les locale strings ici.
Prochaines étapes
- Pour en savoir plus sur le composant
<LocaleSelector>. - Pour en savoir plus sur le hook
useLocale.
Que pensez-vous de ce guide ?