# General Translation React SDKs (gt-react, gt-next): GTProvider
URL: https://generaltranslation.com/ru/docs/react/reference/components/gt-provider.mdx
---

title: GTProvider
description: Предоставляет активную локаль и переводы дереву компонентов General Translation `gt-react`, отрендеренному на сервере. Справочник API для GTProvider.

---

Компонент `<GTProvider>` предоставляет активную локаль и её переводы серверному дереву компонентов `gt-react`. Используйте его, когда сервер загружает переводы и передаёт их клиенту.

*Примечание: React SPA, инициализированные с помощью [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), используют глобальный кэш переводов и не требуют провайдера.*

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах используется импорт из `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

*Примечание: то, как локаль и переводы попадают в `<GTProvider>`, зависит от фреймворка. В `gt-react` вы передаёте их как пропсы (см. ниже); `gt-next`, `gt-tanstack-start` и `gt-react-native` определяют их через собственную настройку, описанную в разделе каждого фреймворка.*

## Обзор [#overview]

Оберните приложение в `<GTProvider>` после [инициализации](/docs/react/reference/config#initialization). Передайте текущие `locale` и `translations` для этой локали, загруженные с помощью [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot).

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

<GTProvider locale={locale} translations={translations}>
  <App />
</GTProvider>
```

*Примечание: [`loadTranslations`](/docs/react/reference/functions/load-translations), [`loadDictionary`](/docs/react/reference/functions/load-dictionary) и учетные данные указываются в [вызове инициализации](/docs/react/reference/config#initialization), а не в `<GTProvider>`. Провайдер синхронно использует определённую локаль и переводы.*

<Callout type="info">
  **Изменено в v11:** `gt-react` `<GTProvider>` больше не принимает `config`, `loadTranslations`, `loadDictionary` и учетные данные. Перенесите их в [вызов инициализации](/docs/react/reference/config#initialization), а в провайдер вместо этого передавайте определённые `locale` и `translations` (из [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot)).
</Callout>

## Как это работает [#how-it-works]

* **Синхронные переводы.** Провайдеру заранее нужен объект `translations`, чтобы переведённый контент отображался синхронно, без мерцания при загрузке. Создайте этот объект с помощью [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) после инициализации.
* **Контекст для дерева.** В конфигурации с провайдером компоненты, расположенные ниже него, получают из него активную локаль, переводы, словари и регион.
* **Переключение перевода.** Когда `enableI18n` равно `false`, провайдер отображает контент на исходной локали и пропускает перевод, что удобно для предпросмотра непереведённого приложения.

## Пропсы [#props]

| Пропс                           | Описание                                                                                  | Тип         | Необязательный | По умолчанию |
| ------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | -------------- | ------------ |
| [`locale`](#locale)             | Активная локаль для дерева.                                                               | `string`    | Нет            | —            |
| [`translations`](#translations) | Переводы для активной локали.                                                             | `object`    | Нет            | —            |
| [`dictionaries`](#dictionaries) | Словари по локалям для [`useTranslations`](/docs/react/reference/hooks/use-translations). | `object`    | Да             | —            |
| [`region`](#region)             | Код активного региона.                                                                    | `string`    | Да             | —            |
| [`enableI18n`](#enable-i18n)    | Переводить содержимое. При `false` отображается исходная локаль.                          | `boolean`   | Да             | `true`       |
| [`children`](#children)         | Дерево приложения.                                                                        | `ReactNode` | Да             | —            |

### `locale` [#locale]

**Тип** `string` · **Обязательно**

Активная локаль для дерева в виде кода BCP 47, например `es`. Получить её ниже по дереву можно с помощью [`useLocale`](/docs/react/reference/hooks/use-locale).

### `translations` [#translations]

**Тип** `object` · **Обязательно**

Переводы для активной локали в формате, который провайдер синхронно принимает. Получите их с помощью [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) после инициализации.

### `dictionaries` [#dictionaries]

**Тип** `object` · **Необязательный**

Словари для каждой локали, используемые [`useTranslations`](/docs/react/reference/hooks/use-translations) для поиска по `id`. Опустите этот параметр, если используете только `<T>` и `useGT`.

### `region` [#region]

**Тип** `string` · **Необязательно**

Код активного региона (например, `US` или `GB`), который используется для форматирования с учетом региона, а также в хуках и селекторах региона.

### `enableI18n` [#enable-i18n]

**Тип** `boolean` · **Необязательно** · **По умолчанию** `true`

Определяет, нужно ли переводить контент. Если `false`, провайдер отображает контент на исходной локали и пропускает перевод.

### `children` [#children]

**Тип** `ReactNode` · **Необязательно**

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

## Примеры [#examples]

```tsx title="src/routes/root.tsx"
import {
  GTProvider,
  initializeGT,
  getTranslationsSnapshot,
  parseLocale,
} from 'gt-react';
import gtConfig from '../../gt.config.json';

const loadTranslations = (locale: string) =>
  import(`../_gt/${locale}.json`).then((m) => m.default);

initializeGT({ ...gtConfig, loadTranslations });

export async function loadRoot(request: Request) {
  const locale = parseLocale(request);
  return {
    locale,
    translations: await getTranslationsSnapshot(locale),
  };
}

export function Root({ locale, translations, children }) {
  return (
    <GTProvider locale={locale} translations={translations}>
      {children}
    </GTProvider>
  );
}
```

```tsx
// Предварительный просмотр приложения без перевода (исходная локаль)
<GTProvider locale={locale} translations={translations} enableI18n={false}>
  <App />
</GTProvider>
```