Helpers
useLocaleSelector
Référence de l’API du hook useLocaleSelector
Présentation
Ce hook renvoie la locale actuelle, la liste des locales, le hook useSetLocale, ainsi qu’une fonction pour récupérer les propriétés de la locale.
Il est conçu pour simplifier la création de votre propre composant de sélection de langue.
Si vous ne souhaitez pas en créer un vous‑même, vous pouvez utiliser le composant <LocaleSelector>.
Références
Renvoie
Un objet contenant la locale actuelle, la liste des locales, le hook useSetLocale et une fonction pour obtenir les propriétés de la locale.
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érer les propriétés du sélecteur de langue
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Récupérer le nom d’affichage
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Si aucune locale n’est disponible, 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 fonctionne 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 ?