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

{/* GENERADO AUTOMÁTICAMENTE: No lo 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-native/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/react-native/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-native/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-native/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 con elegancia
  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 funciona solo del lado del cliente.
* Obtener 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/react-native/api/components/locale-selector).
* Obtener más información sobre el hook [`useLocale`](/docs/react-native/api/helpers/use-locale).