# gt-next: General Translation Next.js SDK: useLocaleSelector
URL: https://generaltranslation.com/es/docs/next/api/helpers/use-locale-selector.mdx
---
title: useLocaleSelector
description: Referencia de la API del hook useLocaleSelector
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita el template en content/docs-templates/. */}


## Descripción general

Este Hook devuelve la configuración regional actual, la lista de configuraciones regionales, el Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) y una función para obtener las propiedades de la configuración regional.
Está pensado para facilitar la creación de tu propio componente selector de configuración regional.

Si no quieres implementar el tuyo propio, puedes usar en su lugar el componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector).

## Referencia

### Devuelve

Un objeto que contiene la configuración regional actual, la lista de configuraciones regionales, el Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) y una función para obtener las propiedades de la configuración regional.

***

## Ejemplos

### `<LocaleSelector>`

Esta es una implementación de ejemplo del componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector).

```jsx
export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // Obtener las propiedades del selector de configuración regional
  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 configuraciones regionales, no renderizar nada o gestionar con elegancia
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // Usar cadena vacía como alternativa si currentLocale no está definido
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Alternativa opcional para cuando no hay ninguna configuración regional establecida */}
      {!locale && <option value='' />}

      {locales.map((locale) => (
        <option key={locale} value={locale} suppressHydrationWarning>
          {getDisplayName(locale)}
        </option>
      ))}
    </select>
  );
}
```

***


## Notas

* Este Hook solo funciona del lado del cliente.
* Obtén más información sobre los códigos de configuración regional [aquí](/docs/core/locales).

## Siguientes pasos

* Más información sobre el componente [`<LocaleSelector>`](/docs/next/api/components/locale-selector).
* Más información sobre el Hook [`useLocale`](/docs/next/api/helpers/use-locale).