Helpers
useLocaleSelector
Riferimento API per l’hook useLocaleSelector
Panoramica
Questo hook restituisce la lingua/locale corrente, l’elenco delle lingue/locali, l’hook useSetLocale e una funzione per ottenere le proprietà della locale.
È pensato per facilitare la creazione di un tuo componente selettore della lingua/locale.
Se non vuoi implementarne uno tuo, puoi usare il componente <LocaleSelector>.
Riferimenti
Restituisce
Un oggetto contenente la locale corrente, l’elenco delle locale, l’hook useSetLocale e una funzione per recuperare le proprietà della locale.
Esempi
<LocaleSelector>
Questo è un esempio di implementazione del componente <LocaleSelector>.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Recupera le proprietà del selettore della lingua/locale
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Ottieni il nome visualizzato
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Se non sono disponibili locali, non renderizzare nulla o gestisci il caso in modo appropriato
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Usa una stringa vuota come fallback se currentLocale non è definito
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Fallback opzionale quando non è impostato alcun locale */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Note
- Questo hook funziona solo lato client.
- Scopri di più sulle stringhe locali qui.
Prossimi passaggi
- Scopri di più sul componente
<LocaleSelector>. - Scopri di più sull’hook
useLocale.
Come valuti questa guida?