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 in your application.

When to Use

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

Reference

Props

Description

Returns

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

Examples

Basic usage

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

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 // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Dictionaries

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

import dictionary from "./dictionary.js";

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

For more information on using dictionaries, see this guide.

Adding configuration

If you’re not keen on passing props directly to the <GTProvider> component, you can create a configuration file and pass that to the component. It also integrates directly with the gtx-cli translate command, so you don’t have to specify things like locales manually as a parameter.

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

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

import config from "../gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Custom translation loader

You can use the loadTranslations 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.

import loadTranslations from "./loadTranslations";

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

Render settings

Render settings control the loading behaviour for translations. There are two fields: timeout and method.

• timeout is the number of milliseconds to wait for a translation to load before showing a fallback (default: 8000ms).
• method is the method used to load translations ("skeleton", "replace", or "default").

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

Each render setting dictates different loading behaviour: "skeleton" returns null until the translations are loaded. "replace" returns the fallback content until the translations are loaded. "default" returns null until the translations are loaded, unless the fallback locale uses the same language as the current locale (i.e., en-US and en-GB). In that case, it returns the fallback content immediately until the translations are loaded.

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.