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

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. 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-native/api/helpers/use-set-locale) y una función para obtener las propiedades de una 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 configuraciones regionales, 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 para mostrar
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // Si no se devuelven configuraciones regionales, no renderizar nada o gestionar 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 solo funciona 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

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