# General Translation React SDKs (gt-react, gt-next): useLocaleSelector
URL: https://generaltranslation.com/es/docs/react/reference/hooks/use-locale-selector.mdx
---

title: useLocaleSelector
description: Crea un selector de configuración regional personalizado con General Translation gt-react. Referencia de la API de useLocaleSelector.

---

El hook `useLocaleSelector` devuelve el estado necesario para crear un selector de configuración regional personalizado: la configuración regional activa, las configuraciones regionales disponibles, una función auxiliar para las propiedades de la configuración regional y un setter.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

## Descripción general [#overview]

Llama a `useLocaleSelector` e integra sus valores en tu propio `<select>` o en una interfaz personalizada.

```tsx
'use client';
import { useLocaleSelector } from 'gt-react';

export default function MySelector() {
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => (
        <option key={l} value={l}>
          {getLocaleProperties(l).nativeNameWithRegionCode}
        </option>
      ))}
    </select>
  );
}
```

*Nota: `useLocaleSelector` solo está disponible del lado del cliente. Si no necesitas una interfaz personalizada, usa el componente [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) en su lugar.*

## Cómo funciona [#how-it-works]

El hook expone todo lo que necesita un selector: la `configuración regional` activa, la lista de `locales`, `setLocale` para cambiarla (lo que guarda la selección y recarga la página) y `getLocaleProperties` para obtener los nombres para mostrar. Pasa un subconjunto de `locales` para limitar las opciones.

## Parámetros [#parameters]

| Parámetro             | Descripción                              | Tipo       | Opcional | Predeterminado      |
| --------------------- | ---------------------------------------- | ---------- | -------- | ------------------- |
| [`locales`](#locales) | Subconjunto de locales que se ofrecerán. | `string[]` | Sí       | Todas las admitidas |

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Todas las admitidas

Un subconjunto de las configuraciones regionales admitidas que se ofrecerán. Si se omite, se usan las configuraciones regionales del contexto de `<GTProvider>`.

## Devuelve [#returns]

**Tipo** `object`

| Campo                 | Descripción                                                           | Tipo                                   |
| --------------------- | --------------------------------------------------------------------- | -------------------------------------- |
| `locale`              | La configuración regional seleccionada actualmente.                   | `string`                               |
| `locales`             | Las configuraciones regionales disponibles.                           | `string[]`                             |
| `setLocale`           | Cambia la configuración regional activa.                              | `(locale: string) => void`             |
| `getLocaleProperties` | Obtiene los metadatos de visualización de una configuración regional. | `(locale: string) => LocaleProperties` |

## Notas [#notes]

* `useLocaleSelector` está disponible del lado del cliente.
* Para un menú desplegable listo para usar, utiliza [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).