Helpers
useLocaleSelector
Référence de l’API du hook useLocaleSelector
Vue d’ensemble
Ce hook retourne la locale actuelle, la liste des locales, ainsi que le hook useSetLocale.
Il est pensé pour faciliter la création de votre propre composant de sélecteur 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 le locale actuel, 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é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 retournée, ne rien afficher ou gérer l'absence avec élégance
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Utiliser une chaîne vide par défaut si currentLocale n'est pas défini
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Option de secours lorsqu'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
- En savoir plus sur le composant
<LocaleSelector>. - En savoir plus sur le hook
useLocale.
Comment trouvez-vous ce guide ?