# 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 para el hook useLocaleSelector
---

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


## Resumen

Este hook devuelve la configuración regional actual, la lista de locales, 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 que puedas crear fácilmente tu propio componente selector de configuración regional.

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

## Referencia

### Devuelve

Un objeto que contiene la configuración regional actual, la lista de locales, 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>`

Este es un ejemplo de implementación 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 de visualización
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // Si no se devuelven locales, renderizar nada o manejar de forma adecuada
  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 se ha establecido ninguna configuración regional */}
      {!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.
* Obtén más información sobre los códigos de configuración regional [aquí](/docs/core/locales).

## Siguientes pasos

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