# react-native: GTProvider
URL: https://generaltranslation.com/ru/docs/react-native/api/components/gtprovider.mdx
---
title: GTProvider
description: Справка по API компонента GTProvider
---

## Обзор

Компонент `<GTProvider>` предоставляет дочерним элементам контекст General Translation (GT), позволяя им получать доступ к переведённому контенту.
Он обязателен для любых переводов на стороне клиента в приложении.

### Когда использовать

* Оберните всё приложение в `<GTProvider>`, чтобы включить переводы на стороне клиента.
* Компонент `<GTProvider>` используется как для [встроенного компонента `<T>`](/docs/react-native/guides/t), так и для [словарей](/docs/react-native/guides/dictionaries).

## Справка

### Пропсы

<TypeTable
  type={{
children: {
  type: 'ReactNode',
  optional: false,
},
projectId: {
  type: 'string',
  optional: true,
},
'dictionary?': {
  type: 'Dictionary',
  optional: true,
  default: 'defaultDictionary',
},
'locales?': {
  type: 'string[]',
  optional: true,
},
'defaultLocale?': {
  type: 'string',
  optional: true,
  default: 'libraryDefaultLocale',
},
'locale?': {
  type: 'string',
  optional: true,
},
'cacheUrl?': {
  type: 'string',
  optional: true,
  default: "'https://cdn.gtx.dev'",
},
'runtimeUrl?': {
  type: 'string',
  optional: true,
  default: "'https://runtime.gtx.dev'",
},
'renderSettings?': {
  type: 'RenderSettings',
  optional: true,
  default: 'defaultRenderSettings',
},
'_versionId?': {
  type: 'string',
  optional: true,
},
'devApiKey?': {
  type: 'string',
  optional: true,
},
'config?': {
  type: 'object',
  optional: true,
},
'loadTranslations?': {
  type: '(locale: string) => Promise<Record<string, any>>',
  optional: true,
},
'loadDictionary?': {
  type: '(locale: string) => Promise<Record<string, any>>',
  optional: true,
},
'region?': {
  type: 'string',
  optional: true,
},
'fallback?': {
  type: 'ReactNode',
  optional: true,
},
'customMapping?': {
  type: 'CustomMapping',
  optional: true,
},
}}
/>

### Описание

| Свойство            | Описание                                                                                                                                                                                                                           |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`          | Любой компонент или родительский компонент, которому нужно переводить текст или получать доступ к информации о переводе на стороне клиента. Сюда входят любые компоненты, использующие `<T>`, `useGT` или другие утилиты перевода. |
| `projectId?`        | ID проекта, необходимый для облачных сервисов General Translation.                                                                                                                                                                 |
| `dictionary?`       | Словарь переводов проекта.                                                                                                                                                                                                         |
| `locales?`          | Список утверждённых локалей проекта.                                                                                                                                                                                               |
| `defaultLocale?`    | Локаль по умолчанию, которая используется, если другая локаль не найдена.                                                                                                                                                          |
| `locale?`           | Текущая локаль, если она уже задана.                                                                                                                                                                                               |
| `cacheUrl?`         | URL сервиса кэширования для получения переводов.                                                                                                                                                                                   |
| `runtimeUrl?`       | URL сервиса времени выполнения для получения переводов.                                                                                                                                                                            |
| `renderSettings?`   | Настройки рендеринга переводов.                                                                                                                                                                                                    |
| `_versionId?`       | ID версии для получения переводов.                                                                                                                                                                                                 |
| `devApiKey?`        | API-ключ для сред разработки.                                                                                                                                                                                                      |
| `config?`           | Объект конфигурации (обычно импортируемый из `gt.config.json`), содержащий `projectId`, `locales`, `defaultLocale` и другие настройки. Альтернатива передаче этих значений как отдельных свойств.                                  |
| `loadTranslations?` | Асинхронная функция, которая принимает строку локали и возвращает объект переводов для этой локали. Используется для загрузки заранее сгенерированных файлов перевода во время выполнения.                                         |
| `loadDictionary?`   | Асинхронная функция, которая принимает строку локали и возвращает переводы словаря для этой локали.                                                                                                                                |
| `region?`           | Код региона пользователя (например, `US`, `GB`). Используется для форматирования с учётом региона.                                                                                                                                 |
| `fallback?`         | Пользовательское резервное содержимое, отображаемое во время загрузки переводов.                                                                                                                                                   |
| `customMapping?`    | Сопоставление имён пользовательских компонентов с соответствующими React-компонентами, используемое при рендеринге переведённого JSX.                                                                                              |

### Возвращает

`React.JSX.Element|undefined`, содержащий дочерние элементы, переданные этому компоненту.

## Примеры

### Базовое использование

Оберните приложение в `<GTProvider>`, чтобы добавить поддержку перевода.
Не забудьте добавить [список поддерживаемых локалей](/docs/platform/supported-locales), чтобы включить переводы.

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Содержимое вашего приложения */}
    </GTProvider>
  );
}
```

### Словари

Вы также можете передать словарь в компонент `<GTProvider>`, а затем обращаться к нему с помощью Hook [`useTranslations`](/docs/react-native/api/dictionary/use-translations).

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';
import dictionary from './dictionary';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations} dictionary={dictionary}> {/* // [!code highlight] */}
      {/* Your app content */}
    </GTProvider>
  );
}
```

Дополнительные сведения об использовании словарей см. в этом [руководстве](/docs/react-native/guides/dictionaries).

### Добавление конфигурации

Если вы не хотите передавать пропсы напрямую в компонент `<GTProvider>`, можно создать файл конфигурации и передать его в компонент.
Он также напрямую интегрируется с [командой `gt translate`](/docs/cli/translate), поэтому вам не придётся вручную указывать в параметрах, например, локали.

```json title="gt.config.json" copy
{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // позволяет откатиться к предыдущим переводам (автоматически генерируется CLI)
}
```

Всё, что вам нужно сделать, — передать это в компонент `<GTProvider>`.

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import config from './gt.config.json';

export default function App() {
  return (
    <GTProvider {...config}> {/* // [!code highlight] */}
      {/* Содержимое вашего приложения */}
    </GTProvider>
  );
}
```

### Пользовательский загрузчик переводов

Вы можете использовать проп `loadTranslations`, чтобы загружать переводы из собственного источника.
Это полезно, если вам нужно загружать переводы из другого источника, например через собственный API.

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Содержимое вашего приложения */}
    </GTProvider>
  );
}
```

### Настройки рендеринга

Настройки рендеринга определяют поведение загрузки переводов.
Есть два поля: `timeout` и `method`.

* `timeout` — количество миллисекунд, в течение которых система ждёт загрузки перевода, прежде чем показать резервный вариант (по умолчанию: `8000ms`).
* `method` — способ загрузки переводов (`"skeleton"`, `"replace"` или `"default"`).

```jsx title="App.tsx" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  {/* Содержимое вашего приложения */}
</GTProvider>
```

Каждый режим рендеринга определяет свое поведение при загрузке:
`"skeleton"` будет возвращать `null`, пока переводы не загрузятся.
`"replace"` будет возвращать резервное содержимое, пока переводы не загрузятся.
`"default"` будет возвращать `null`, пока переводы не загрузятся, если только резервная локаль не использует тот же язык, что и текущая локаль (например, `en-US` и `en-GB`).
В этом случае до загрузки переводов он будет сразу возвращать резервное содержимое.

***

## Примечания

* `<GTProvider>` должен оборачивать все [компоненты `<T>`](/docs/react-native/api/components/t) и другие функции, связанные с переводом. Подробнее см. [здесь](/docs/react-native/api/components/gtprovider).

## Что дальше

* Подробнее о том, как переводить текст и компоненты с помощью [компонента `<T>`](/docs/react-native/guides/t).