# General Translation React SDKs (gt-react, gt-next): Administrar configuraciones regionales
URL: https://generaltranslation.com/es/docs/react/guides/managing-locales.mdx
---

title: Administrar configuraciones regionales
description: Cómo permitir que los usuarios cambien de idioma y consultar la configuración regional activa con General Translation en React, Next.js, TanStack Start y React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Tu aplicación declara qué configuraciones regionales admite, permite que los usuarios elijan una y consulta la configuración regional activa para renderizar en consecuencia. Esta guía cubre cada parte.

## Declara las configuraciones regionales compatibles [#declare]

Enumera la configuración regional predeterminada y las de destino en `gt.config.json`. Estas son las configuraciones regionales entre las que tu aplicación puede cambiar.

```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, el plugin `withGTConfig` lee `gt.config.json` automáticamente, así que no hace falta ninguna inicialización manual. Consulta [Configuring General Translation](/docs/react/guides/configuring) para cada caso de setup.

## Agrega un selector de idioma [#switcher]

Inserta [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) para tener un menú desplegable listo para usar con tus configuraciones regionales compatibles. 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 incluye un componente `<LocaleSelector>` predefinido. Crea el tuyo con [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (o [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) y [`useLocales`](/docs/react/reference/hooks/use-locales)), como se muestra a continuación.*
  </Tab>
</Tabs>

Para crear tu propio selector, usa `useSetLocale` para cambiar la configuración regional y `useLocales` para mostrar las opciones. Estos hooks están disponibles en todos los frameworks; impórtalos desde el paquete de tu framework.

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

function Switcher() {
  const locale = useLocale();
  const locales = useLocales();
  const setLocale = useSetLocale();
  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => <option key={l} value={l}>{l}</option>)}
    </select>
  );
}
```

*Nota: Al cambiar la configuración regional, la elección se guarda —en una cookie en la web (React, Next.js, TanStack Start) o en el almacenamiento nativo en React Native— y se recarga para mostrar las nuevas traducciones.*

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

Usa hooks para leer el estado de la configuración regional en tus componentes:

* [`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.
* [`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 metadatos de presentación de una configuración regional, como su nombre.

*Nota: `gt-tanstack-start` no exporta actualmente `useLocaleDirection` ni `useLocaleProperties`. En su lugar, consulta los metadatos de la configuración regional con `getLocaleProperties` de `generaltranslation`.*

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

```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} />;
}
```

*Nota: En Next.js, la detección y la persistencia de la configuración regional en tiempo de solicitud se ejecutan en middleware, como se explica en las páginas del framework de Next.js.*

Consulta la [referencia de hooks](/docs/react/reference/hooks/use-locale) para ver la lista completa.
## Next steps

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