<GTProvider>

Overview

The <GTProvider> component provides General Translation (GT) context to its children, enabling them to access translated content. It is required for any client-side translations on your application.

When to Use

Wrap your entire application in <GTProvider> to enable translations on the client.
When working with dictionaries, optionally specify an id to limit the dictionary data sent to the client, optimizing performance for large dictionaries.
The <GTProvider> component is used for both inline <T> and dictionaries.

Reference

Props

Prop	Type	Default
`children`	`ReactNode`	-
`projectId`	`string`	-
`id?`	`string`	`undefined`
`dictionary?`	`Dictionary`	`defaultDictionary`
`locales?`	`string[]`	-
`defaultLocale?`	`string`	`libraryDefaultLocale`
`locale?`	`string`	-
`cacheUrl?`	`string`	`'https://cdn.gtx.dev'`
`runtimeUrl?`	`string`	`'https://runtime.gtx.dev'`
`renderSettings?`	`RenderSettings`	`defaultRenderSettings`
`_versionId?`	`string`	-
`devApiKey?`	`string`	-
`metadata?`	`object`	-

Description

Prop	Description
`children`	Any component or the parents of any component that needs to translate or access translation information on the client side. These should include any components using `<T>`, `useGT`, or other translation utilities.
`projectId?`	The project ID required for General Translation cloud services.
`id?`	The ID of a nested dictionary to limit the data sent to the client. This is useful for large projects with extensive dictionaries.
`dictionary?`	The translation dictionary for the project.
`locales?`	The list of approved locales for the project.
`defaultLocale?`	The default locale to use if no other locale is found.
`locale?`	The current locale, if already set.
`cacheUrl?`	The URL of the cache service for fetching translations.
`runtimeUrl?`	The URL of the runtime service for fetching translations.
`renderSettings?`	The settings for rendering translations.
`_versionId?`	The version ID for fetching translations.
`devApiKey?`	The API key for development environments.
`metadata?`	Additional metadata to pass to the context.

Returns

React.JSX.Element|undefined containing the children that were passed to this component.

Examples

Basic usage

Wrap your application in <GTProvider> to add translation to your app. Don't forget to add a list of supported locales to enable translation.

index.js

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(
  <StrictMode>
    <GTProvider locales={['es', 'fr']}> // Enable Spanish and French
      <App />
    </GTProvider>
  </StrictMode>
);

Dictionaries

You can also pass a dictionary to the <GTProvider> component and then access it with the useDict() hook.

index.js

import dictionary from "./dictionary.js";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}>
      <App />
    </GTProvider>
  </StrictMode>
);

For more information on using dictionaries, check out this guide.

Adding configuration

If you're not a fan of passing props directly to the <GTProvider> component, you can create a configuration file and pass it to the component. It also directly integrates with the gt-react-cli translate command, so you don't have to specify things like locales manually as a parameter.

gt.config.json

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // allows for rolling back to previous translations (autogenerated by the CLI)
}

All you have to do is just pass this to the <GTProvider> component.

index.js

import config from "../gt.config.json";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}>
      <App />
    </GTProvider>
  </StrictMode>
);

Custom translation loader

You can use the loadTranslation prop to load translations from a custom source. This is useful when you need to load translations from a different source, such as a custom API.

index.js

import loadTranslation from "./loadTranslation";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslation={loadTranslation}>
      <App />
    </GTProvider>
  </StrictMode>
);

Notes

The <GTProvider> must wrap all <T> components and other translation-related functions. Learn more here.

Next steps

Learn more about the <T> component for translating text and components.
Check out translation components and functions: <T>, useGT(), or useDict().

<GTProvider>

On this page