# gt-react: General Translation React SDK: GTProvider URL: https://generaltranslation.com/ru/docs/react/api/components/gtprovider.mdx --- title: GTProvider description: Справочник по API компонента GTProvider --- ## Обзор Компонент `` предоставляет дочерним элементам контекст General Translation (GT), позволяя им обращаться к переведённому контенту. Он необходим для любых переводов на стороне клиента в вашем приложении. ### Когда использовать * Оберните всё приложение в ``, чтобы включить переводы на стороне клиента. * Компонент `` используется как для [встроенного ``](/docs/react/guides/t), так и для [словарей](/docs/react/guides/dictionaries). ## Справочник ### Пропс Promise>', optional: true, }, 'loadDictionary?': { type: '(locale: string) => Promise>', optional: true, }, 'region?': { type: 'string', optional: true, }, 'fallback?': { type: 'ReactNode', optional: true, }, 'customMapping?': { type: 'CustomMapping', optional: true, }, 'enableI18n?': { type: 'boolean', optional: true, default: 'true', }, }} /> ### Описание | Свойство | Описание | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | Любой компонент или его родительские компоненты, которым нужно переводить текст или получать доступ к информации о переводе на стороне клиента. Сюда входят любые компоненты, использующие ``, `useGT` или другие утилиты перевода. | | `projectId?` | Идентификатор проекта, необходимый для облачных сервисов General Translation. | | `dictionary?` | Словарь переводов проекта. | | `locales?` | Список утверждённых локалей проекта. | | `defaultLocale?` | Локаль по умолчанию, которая используется, если другая локаль не найдена. | | `locale?` | Текущая локаль, если она уже задана. | | `cacheUrl?` | URL сервиса кэша для получения переводов. | | `runtimeUrl?` | URL сервиса времени выполнения для получения переводов. | | `renderSettings?` | Настройки рендеринга переводов. | | `_versionId?` | Идентификатор версии для получения переводов. | | `devApiKey?` | API-ключ для сред разработки. | | `config?` | Объект конфигурации (обычно импортируемый из `gt.config.json`), содержащий `projectId`, `locales`, `defaultLocale` и другие настройки. Альтернатива передаче этих значений как отдельных свойств. | | `loadTranslations?` | Асинхронная функция, которая принимает строку локали и возвращает объект переводов для этой локали. Используется для загрузки предварительно сгенерированных файлов перевода во время выполнения. См. [быстрый старт](/docs/react) для примера использования. | | `loadDictionary?` | Асинхронная функция, которая принимает строку локали и возвращает объект словаря переводов для этой локали. | | `region?` | Код региона пользователя (например, `US`, `GB`). Используется для форматирования с учётом региона. | | `fallback?` | Пользовательский резервный контент, отображаемый во время загрузки переводов. | | `customMapping?` | Сопоставление пользовательских имён компонентов с соответствующими React-компонентами, используемое при рендеринге переведённого JSX. | | `enableI18n?` | Указывает, включать ли возможности i18n. По умолчанию — `true`. | ### Возвращает `React.JSX.Element|undefined`, содержащий дочерние элементы, переданные этому компоненту. ## Примеры ### Базовое использование Оберните приложение в ``, чтобы добавить поддержку перевода. Не забудьте добавить [список поддерживаемых локалей](/docs/platform/supported-locales), чтобы включить переводы. ```jsx title="index.js" copy import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./index.css"; import App from "./App.tsx"; import { GTProvider } from "gt-react"; createRoot(document.getElementById("root")!).render( // Включить испанский и французский // [!code highlight] // [!code highlight] ); ``` ### Словари Вы также можете передать словарь в компонент ``, а затем обращаться к нему через хук [`useTranslations`](/docs/react/api/dictionary/use-translations). ```jsx title="index.js" copy import dictionary from "./dictionary.js"; createRoot(document.getElementById("root")!).render( // [!code highlight] ); ``` Подробнее об использовании словарей см. в этом [руководстве](/docs/react/guides/dictionaries). ### Добавление конфигурации Если вы не хотите передавать пропсы напрямую в компонент ``, можно создать файл конфигурации и передать его в компонент. Он также напрямую интегрируется с [командой `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 автоматически) } ``` Всё, что вам нужно сделать, — просто передать это в компонент ``. ```jsx title="index.js" copy import config from "../gt.config.json"; createRoot(document.getElementById("root")!).render( // [!code highlight] ); ``` ### Пользовательский загрузчик переводов Вы можете использовать проп `loadTranslations` для загрузки переводов из собственного источника. Это полезно, если вам нужно загружать переводы из другого источника, например через собственный API. ```jsx title="index.js" copy import loadTranslations from "./loadTranslations"; createRoot(document.getElementById("root")!).render( // [!code highlight] ); ``` ### Настройки рендеринга Настройки рендеринга определяют поведение загрузки переводов. Есть два поля: `timeout` и `method`. * `timeout` — количество миллисекунд, в течение которых система ждёт загрузки перевода, прежде чем показать резервный вариант (по умолчанию: `8000ms`). * `method` — метод загрузки переводов (`"skeleton"`, `"replace"` или `"default"`). ```jsx title="index.js" copy ``` Каждый параметр рендеринга задаёт своё поведение при загрузке: `"skeleton"` будет возвращать `null`, пока переводы не загрузятся. `"replace"` будет возвращать резервный контент, пока переводы не загрузятся. `"default"` будет возвращать `null`, пока переводы не загрузятся, если только резервная локаль не использует тот же язык, что и текущая локаль (например, `en-US` и `en-GB`). В этом случае он сразу будет возвращать резервный контент, пока переводы не загрузятся. *** ## Примечания * `` должен оборачивать все [компоненты ``](/docs/react/api/components/t) и другие функции, связанные с переводом. Подробнее см. [здесь](/docs/react/api/components/gtprovider). ## Следующие шаги * Подробнее о [`компоненте `](/docs/react/guides/t) для перевода текста и компонентов.