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

{/* GENERADO AUTOMÁTICAMENTE: No edites 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/react/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, puedes usar el componente [`<LocaleSelector>`](/docs/react/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/react/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/react/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.
* Obtener más información sobre los códigos de configuración regional [aquí](/docs/core/locales).

## Próximos pasos

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