# General Translation React SDKs (gt-react, gt-next, gt-react-native): Administrar configuraciones regionales
URL: https://generaltranslation.com/es/docs/react/guides/managing-locales.mdx
---
title: Administrar configuraciones regionales
description: Cómo configurar las configuraciones regionales admitidas, crear un selector de idioma de React y consultar o cambiar la configuración regional activa.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Los códigos de configuración regional, como `en-US` y `fr`, vinculan la elección de idioma del usuario con las traducciones y reglas de formato adecuadas.

Declara las configuraciones regionales que admite tu aplicación, permite que los usuarios elijan una y consulta la configuración regional activa cuando tu interfaz de usuario necesite un comportamiento específico del idioma.

## Comprende el estado de la configuración regional [#locale-state]

* **Configuración regional predeterminada:** el idioma en el que está escrito el contenido de origen y el contenido alternativo final cuando no coincide ninguna configuración regional admitida.
* **Configuraciones regionales admitidas:** todas las configuraciones regionales que un usuario puede elegir, incluida la predeterminada y las de destino.
* **Configuración regional activa:** la configuración regional admitida seleccionada desde la URL, una preferencia guardada, la configuración del navegador o la predeterminada.

## Declara las configuraciones regionales admitidas [#declare]

Establece [`defaultLocale`](/docs/react/reference/config#default-locale) y enumera tus [`locales`](/docs/react/reference/config#locales) de destino en `gt.config.json`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

En React, TanStack Start y React Native, pasa estos valores en la llamada de inicialización. En Next.js, [`withGTConfig`](/docs/react/nextjs/config) lee `gt.config.json` automáticamente. Consulta [Configuring General Translation](/docs/react/guides/configuring) para la configuración de cada framework.

## Añade un selector de idioma [#switcher]

Elige el enfoque más sencillo que se adapte a tu interfaz de usuario:

* Usa [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) para incluir un menú desplegable listo para usar en React, Next.js o TanStack Start.
* Usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) para crear un selector de idioma personalizado en cualquier framework compatible.
* Usa [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) para un botón u otro control que cambie a una configuración regional específica.

### Usa el selector listo para usar

Renderiza [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) en un componente cliente. Sin props, muestra todas las configuraciones regionales configuradas y cambia la configuración regional activa cuando el usuario selecciona una.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { LocaleSelector } from 'gt-react';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { LocaleSelector } from 'gt-next';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { LocaleSelector } from 'gt-tanstack-start';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="React Native">
    *Nota: React Native no exporta [`<LocaleSelector>`](/docs/react/reference/components/locale-selector). Crea un selector personalizado con [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector), como se muestra a continuación.*
  </Tab>
</Tabs>

### Crea un selector de idioma personalizado

[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) proporciona la configuración regional activa, las configuraciones regionales disponibles, una función para establecerla y nombres para mostrar localizados en un solo hook. Usa los controles de tu framework:

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useLocaleSelector } from 'gt-react';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    'use client';

    import { useLocaleSelector } from 'gt-next';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useLocaleSelector } from 'gt-tanstack-start';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { Button, View } from 'react-native';
    import { useLocaleSelector } from 'gt-react-native';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <View>
          {locales.map((localeCode) => (
            <Button
              key={localeCode}
              title={getLocaleProperties(localeCode).nativeNameWithRegionCode}
              disabled={localeCode === locale}
              onPress={() => setLocale(localeCode)}
            />
          ))}
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

Si solo necesitas una acción directa en una aplicación web de React, llama a [`useSetLocale`](/docs/react/reference/hooks/use-set-locale):

```tsx
import { useSetLocale } from 'gt-react';

function FrenchButton() {
  const setLocale = useSetLocale();
  return <button onClick={() => setLocale('fr')}>Français</button>;
}
```

## Conservar y enrutar las selecciones de configuración regional [#persistence]

Cambiar la configuración regional mediante [`<LocaleSelector>`](/docs/react/reference/components/locale-selector), [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) o [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) conserva la selección y aplica las nuevas traducciones de forma distinta según el framework:

* **React:** guarda la configuración regional en una cookie y, de forma predeterminada, recarga la página. Un callback personalizado de recarga del proveedor puede sustituir la recarga completa de la página.
* **Next.js App Router:** guarda la configuración regional en una cookie y, luego, actualiza el árbol de componentes del servidor. El middleware de configuración regional aplica el enrutamiento de rutas configurado.
* **Next.js Pages Router:** guarda la configuración regional en una cookie. Configura el callback de recarga del proveedor para navegar con Pages Router y obtener los props de página de la configuración regional seleccionada.
* **TanStack Start:** guarda la configuración regional en una cookie y, luego, recarga la página. Con [`localeRouting`](/docs/react/reference/config#locale-routing) habilitado, navega al pathname de la configuración regional correspondiente.
* **React Native:** guarda la configuración regional en el almacenamiento nativo (o en `localStorage` en React Native Web), actualiza el estado del proveedor, carga las traducciones de la configuración regional y vuelve a renderizar sin navegación en el navegador.

En las páginas públicas, las URL basadas en la configuración regional permiten compartir e indexar cada versión de idioma. Configura el enrutamiento en la guía específica de cada framework:

* [Middleware de Next.js App Router](/docs/react/nextjs/app-router-middleware)
* [Enrutamiento de configuración regional de Next.js Pages Router](/docs/react/nextjs/pages-router-middleware)
* [Enrutamiento de configuración regional de TanStack Start](/docs/react/tanstack-start/setup#locale-routing)

## Consulta la configuración regional activa [#read]

Usa hooks de configuración regional al renderizar una interfaz de usuario específica del idioma:

* [`useLocale`](/docs/react/reference/hooks/use-locale) devuelve el código de configuración regional activo.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) devuelve la configuración regional de origen.
* [`useLocales`](/docs/react/reference/hooks/use-locales) devuelve todos los códigos de configuración regional compatibles.
* [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) devuelve `'ltr'` o `'rtl'` para definir la disposición de la página.
* [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) devuelve el nombre, el nombre nativo, la región, el sistema de escritura y otros metadatos de presentación de una configuración regional.

*Nota: `gt-tanstack-start` no exporta actualmente [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) ni [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties). En su lugar, consulta los metadatos de la configuración regional con [`getLocaleProperties`](/docs/platform/core/reference/utility-functions/locales/get-locale-properties) de `generaltranslation`.*

En Next.js, estos hooks funcionan en componentes de servidor síncronos del App Router. En componentes async, llama a [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) y [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) de `gt-next/server`:

```tsx
import { getLocale, getLocaleDirection } from 'gt-next/server';

async function Layout() {
  const locale = await getLocale();
  const dir = await getLocaleDirection();
  return <html lang={locale} dir={dir} />;
}
```

Consulta la página de referencia de [`useLocale`](/docs/react/reference/hooks/use-locale) para conocer el comportamiento de coincidencia de configuración regional y de contenido alternativo.
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/configuring
- /docs/react/guides/storing-translations