# 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 esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Descripción general

Este hook devuelve la configuración regional actual, la lista de configuraciones regionales, 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 su uso al crear tu propio componente selector de configuración regional.

Si no quieres implementar uno propio, 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 configuraciones regionales, 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 propiedades del selector de configuración regional
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
    _locales ? _locales : undefined
  );

  // Obtener nombre para mostrar
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // Si no se devuelven locales, no renderizar nada o manejar el caso con elegancia
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // Usar cadena vacía como fallback si currentLocale no está definido
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Fallback opcional para cuando no se ha establecido ningún locale */}
      {!locale && <option value='' />}

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

***


## Notas

* Este hook solo está disponible del lado del cliente.
* Obtén 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).