Консоль

Смена языка

Как настроить и переключать языки в вашем приложении на React

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

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

  • Программно: хук useSetLocale для кастомных элементов управления
  • Готовый UI: компонент <LocaleSelector> с выпадающим списком
  • Кастомный UI: хук useLocaleSelector для создания собственных селекторов

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

Хук useSetLocale позволяет изменять язык вашего приложения:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Установить язык</button>;
}

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

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

Компонент <LocaleSelector> предоставляет готовый выпадающий список, который автоматически отображает все настроенные локали:

import { LocaleSelector } from 'gt-react';

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

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

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

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

Если вы хотите создать собственный компонент выбора локали, используйте useLocaleSelector:

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>:

// ✅ Верно
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

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

Дальнейшие шаги

Насколько полезно это руководство?

На этой странице

Доступные методы
Использование хука useSetLocale
Использование компонента <LocaleSelector>
Использование хука useLocaleSelector
Важные замечания
Требование к GTProvider
Дальнейшие шаги
Смена языка