useLocaleSelector()

Descripción general

Este hook devuelve el idioma actual, la lista de idiomas y el hook useSetLocale(). Está diseñado para facilitar la creación de tu propio componente selector de idioma.

Si no quieres implementar el tuyo propio, puedes usar el componente <LocaleSelector> en su lugar.

Referencia

Devuelve

Un objeto que contiene la configuración regional actual, la lista de configuraciones regionales y el gancho useSetLocale().

Ejemplos

`<LocaleSelector>`

Esta es la implementación de ejemplo del componente <LocaleSelector>.

export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // Obtener propiedades del selector de locales
  const { locale, locales, setLocale } = useLocaleSelector(
    _locales ? _locales : undefined
  );
 
  // Obtener nombre para mostrar
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };
 
  // Si no se devuelven locales, simplemente no renderizar nada o manejarlo adecuadamente
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }
 
  return (
    <select
      {...props}
      // Volver a una cadena vacía si currentLocale es indefinido
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Fallback opcional para cuando no se establece un locale */}
      {!locale && <option value='' />}
 
      {locales.map((locale) => (
        <option key={locale} value={locale} suppressHydrationWarning>
          {getDisplayName(locale)}
        </option>
      ))}
    </select>
  );
}

Notas

Este hook es solo del lado del cliente.
Aprende más sobre cadenas de localización aquí.

Próximos Pasos

Aprende más sobre el componente <LocaleSelector>.
Aprende más sobre el hook useLocale().