# 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
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo configurar las configuraciones regionales admitidas, crear un selector de idioma de React y consultar o cambiar la configuración regional activa.

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, normalmente, actualiza el árbol de componentes del servidor. Con el enrutamiento de configuración regional habilitado, cambiar a la configuración regional predeterminada desde una URL que se resuelve en una configuración regional no predeterminada recarga el documento para que el middleware pueda eliminar el prefijo de configuración regional. Una URL que ya se resuelve en la configuración regional predeterminada solo se actualiza.
* **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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.