# General Translation React SDKs (gt-react, gt-next): Managing locales
URL: https://generaltranslation.com/en-GB/docs/react/guides/managing-locales.mdx
---

title: Managing locales
description: How to let users switch between languages and read the active locale with General Translation across React, Next.js, TanStack Start and React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Your app declares which locales it supports, lets users choose one, and reads the active locale to render accordingly. This guide covers each part.

## Declare supported locales [#declare]

List your default and target locales in `gt.config.json`. These are the locales your app can switch between.

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

In React, TanStack Start, and React Native, pass these values into the initialisation call. In Next.js, the `withGTConfig` plugin reads `gt.config.json` automatically, so there is no manual initialisation. See [Configuring General Translation](/docs/react/guides/configuring) for setup instructions for each framework.

## Add a language switcher [#switcher]

Drop in [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) for a ready-made dropdown of your supported locales. It changes the active locale when the user selects one.

<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">
    *Note: React Native does not ship a prebuilt `<LocaleSelector>` component. Build your own with [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (or [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) and [`useLocales`](/docs/react/reference/hooks/use-locales)), as shown below.*
  </Tab>
</Tabs>

To build your own switcher, use `useSetLocale` to change the locale and `useLocales` to list the options. These hooks are available in every framework; import them from your framework&#39;s package.

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

*Note: Changing the locale persists the choice — a cookie on the web (React, Next.js, TanStack Start) or the native store on React Native — and reloads so the new translations render.*

## Read the active locale [#read]

Use hooks to read locale state in your components:

* [`useLocale`](/docs/react/reference/hooks/use-locale) returns the active locale code.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) returns the source locale.
* [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) returns `'ltr'` or `'rtl'`, for laying out the page.
* [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) returns display metadata for a locale, such as its name.

*Note: `gt-tanstack-start` does not currently export `useLocaleDirection` or `useLocaleProperties`. Read locale metadata with `getLocaleProperties` from `generaltranslation` instead.*

These hooks work in synchronous App Router server components. In async App Router components, use [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) and [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) from `gt-next/server` instead:

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

*Note: In Next.js, request-time locale detection and persistence run in middleware, covered in the Next.js framework pages.*

See the [Hooks reference](/docs/react/reference/hooks/use-locale) for the full list.
## Next steps

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