Helpers
useLocaleSelector
Referencia de API del hook useLocaleSelector
Descripción general
Este hook devuelve la locale actual, la lista de locales, el hook useSetLocale y una función para obtener las propiedades de la locale.
Está pensado para facilitar su uso al crear tu propio componente selector de idioma.
Si no quieres implementar el tuyo, puedes usar el componente <LocaleSelector>.
Referencias
Devuelve
Un objeto que contiene la locale actual, la lista de locales, el hook useSetLocale y una función para obtener las propiedades de la locale.
Ejemplos
<LocaleSelector>
Este es un ejemplo de implementación del componente <LocaleSelector>.
export default function LocaleSelector({
locales: _locales,
...props
}: {
locales?: string[];
[key: string]: any;
}): React.JSX.Element | null {
// Obtener las propiedades del selector de idioma
const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
_locales ? _locales : undefined
);
// Obtener el nombre para mostrar
const getDisplayName = (locale: string) => {
return capitalizeLanguageName(
getLocaleProperties(locale).nativeNameWithRegionCode
);
};
// Si no se devuelven locales, no renderizar nada o manejarlo de forma adecuada
if (!locales || locales.length === 0 || !setLocale) {
return null;
}
return (
<select
{...props}
// Usar una cadena vacía como contenido de respaldo predeterminado si currentLocale es indefinido
value={locale || ''}
onChange={(e) => setLocale(e.target.value)}
>
{/* Contenido de respaldo predeterminado opcional cuando no se haya establecido ningún locale */}
{!locale && <option value='' />}
{locales.map((locale) => (
<option key={locale} value={locale} suppressHydrationWarning>
{getDisplayName(locale)}
</option>
))}
</select>
);
}Notas
- Este hook funciona únicamente en el lado del cliente.
- Más información sobre los códigos de configuración regional aquí.
Próximos pasos
- Más información sobre el componente
<LocaleSelector>. - Más información sobre el hook
useLocale.
¿Qué te ha parecido esta guía?