# gt-react: General Translation React SDK: Переключение языков
URL: https://generaltranslation.com/ru/docs/react/guides/languages.mdx
---
title: Переключение языков
description: Как настроить языки и переключаться между ними в вашем React-приложении
---

{/* АВТОМАТИЧЕСКИ СГЕНЕРИРОВАНО: Не редактируйте напрямую. Вместо этого изменяйте шаблон в content/docs-templates/. */}

Переключение языка позволяет пользователям менять предпочтительную локаль контента в вашем приложении. GT React предлагает несколько вариантов — от простого программного переключения до готовых UI-компонентов для создания пользовательских переключателей языка.


## Доступные методы

* **Программно**: хук [`useSetLocale`](/docs/react/api/helpers/use-set-locale) для собственных элементов управления
* **Готовый UI**: компонент [`<LocaleSelector>`](/docs/react/api/components/locale-selector) с выпадающим списком
* **Собственный UI**: хук [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) для создания собственных селекторов

## Использование хука `useSetLocale`

Хук [`useSetLocale`](/docs/react/api/helpers/use-set-locale) позволяет менять язык приложения:

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

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Просто передайте локаль, на которую хотите переключиться, в качестве аргумента функции, которую возвращает хук.


## Использование компонента `<LocaleSelector>`

Компонент [`<LocaleSelector>`](/docs/react/api/components/locale-selector) предоставляет готовый выпадающий список, который автоматически отображает все настроенные локали:

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

export default function MyComponent() {
  return <LocaleSelector />;
}
```

Этот компонент автоматически:

* Показывает все локали, настроенные для вашего проекта
* Отображает локали под их самоназваниями
* Обеспечивает логику переключения
* Сохраняет текущее состояние выбора


## Использование хука `useLocaleSelector`

Если вы хотите создать собственный компонент выбора локали, используйте [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Текущая активная локаль (например, 'en', 'es')
    locales,             // Массив локалей, поддерживаемых проектом ['en', 'es', 'fr']
    setLocale,           // Функция для смены локали: setLocale('es')
    getLocaleProperties  // Функция для получения отображаемой информации о локали
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* например, "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Важные примечания

### Требование для GTProvider

Компоненты переключения языка необходимо использовать внутри [`<GTProvider>`](/docs/react/api/components/gtprovider):

```tsx
// ✅ Правильно
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Неправильно — вне провайдера
<LanguageSwitcher />
```


## Следующие шаги

* [Руководство по динамическому контенту](/docs/key-concepts/dynamic-content) — Перевод контента во время выполнения
* Ссылки на API:
  * [Хук `useSetLocale`](/docs/react/api/helpers/use-set-locale)
  * [Компонент `<LocaleSelector>`](/docs/react/api/components/locale-selector)
  * [Хук `useLocaleSelector`](/docs/react/api/helpers/use-locale-selector)