# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocaleSelector
URL: https://generaltranslation.com/es/docs/react/reference/hooks/use-locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Crea un selector de configuración regional personalizado. Referencia de la API de useLocaleSelector.

El hook `useLocaleSelector` expone los elementos para un selector de idioma personalizado: la configuración regional activa, los locales disponibles, una función auxiliar para las propiedades de la configuración regional y un setter para cambiar la configuración regional.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`.*

## Descripción general [#overview]

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

*Los ejemplos importan desde `gt-react`; importa desde el paquete de tu framework en su lugar.*

```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 y `getLocaleProperties` para obtener los nombres para mostrar. Pasa un subconjunto de `locales` para limitar las opciones. El comportamiento al cambiar la configuración regional depende del framework; consulta [Administrar los locales](/docs/react/guides/managing-locales#persistence).

## 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 los locales admitidos que se ofrecerán. El hook conserva el orden de una lista proporcionada explícitamente. Si no se proporciona, ordena los locales del contexto de [`<GTProvider>`](/docs/react/reference/components/gt-provider) por nombre para mostrar nativo.

## Devuelve [#returns]

**Tipo** `object`

| Campo                 | Descripción                                                                                                       | Tipo                                   |
| --------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| `locale`              | La configuración regional seleccionada actualmente.                                                               | `string`                               |
| `locales`             | Los locales disponibles.                                                                                          | `string[]`                             |
| `setLocale`           | Cambia la configuración regional activa.                                                                          | `(locale: string) => void`             |
| `getLocaleProperties` | Obtiene los metadatos de visualización de una configuración regional mediante el mapeo personalizado configurado. | `(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).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.