# General Translation React SDKs (gt-react, gt-next): Управление локалями
URL: https://generaltranslation.com/ru/docs/react/guides/managing-locales.mdx
---

title: Управление локалями
description: Как дать пользователям возможность переключать языки и определять активную локаль с помощью General Translation в React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

Ваше приложение определяет, какие локали оно поддерживает, позволяет пользователям выбирать нужную и использует активную локаль для соответствующего отображения контента. В этом руководстве рассматривается каждая из этих частей.

## Укажите поддерживаемые локали [#declare]

Укажите локаль по умолчанию и целевые локали в `gt.config.json`. Это локали, между которыми может переключаться ваше приложение.

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

В React, TanStack Start и React Native передайте эти значения в вызов инициализации. В Next.js плагин `withGTConfig` автоматически считывает `gt.config.json`, поэтому вручную ничего инициализировать не нужно. См. [Настройка General Translation](/docs/react/guides/configuring), чтобы узнать, как это делается в каждом случае.

## Добавьте переключатель языка [#switcher]

Используйте [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) — это готовый выпадающий список поддерживаемых локалей. Он меняет активную локаль, когда пользователь выбирает нужный вариант.

<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">
    *Примечание: React Native не включает готовый компонент `<LocaleSelector>`. Создайте свой с помощью [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (или [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) и [`useLocales`](/docs/react/reference/hooks/use-locales)), как показано ниже.*
  </Tab>
</Tabs>

Чтобы создать собственный переключатель, используйте `useSetLocale` для смены локали, а `useLocales` — для вывода списка вариантов. Эти хуки доступны во всех фреймворках; импортируйте их из пакета вашего фреймворка.

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

*Примечание: При смене локали этот выбор сохраняется — в cookie-файле в вебе (React, Next.js, TanStack Start) или в нативном хранилище в React Native, — после чего страница перезагружается, чтобы отобразились новые переводы.*

## Чтение активной локали [#read]

Используйте хуки, чтобы получать состояние локали в компонентах:

* [`useLocale`](/docs/react/reference/hooks/use-locale) возвращает код активной локали.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) возвращает исходную локаль.
* [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) возвращает `'ltr'` или `'rtl'` для определения направления страницы.
* [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) возвращает метаданные локали для отображения, например её имя.

*Примечание: `gt-tanstack-start` пока не экспортирует `useLocaleDirection` и `useLocaleProperties`. Вместо них получайте метаданные локали через `getLocaleProperties` из `generaltranslation`.*

Эти хуки работают в синхронных серверных компонентах App Router. В асинхронных компонентах App Router вместо них используйте [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) и [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) из `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} />;
}
```

*Примечание: В Next.js определение локали во время обработки запроса и её сохранение выполняются в middleware; это описано на страницах, посвящённых фреймворку Next.js.*

Полный список см. в [справочнике по хукам](/docs/react/reference/hooks/use-locale).
## Next steps

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