<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 dictionary design patterns.

Reference

Props

Description

Returns

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

Examples

Basic usage

Wrap your application in <GTProvider> to provide translation context to your app.

If you are in development, you can use the devApiKey prop to specify a development API key. This will give you access to fast translations and will not cache any content in the CDN.

Once you are ready to deploy you can just leave the devApiKey prop as undefined, and add your production api key to your environment. Any translations created with the production api key will be distributed to the global CDN.

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
      projectId={GT_PROJECT_ID} 
      devApiKey={GT_API_KEY} // for development builds use a dev key
    >
      <App />
    </GTProvider>
  </StrictMode>
);

Supported locales

This example configures gt-react with English (en-US) as the default locale. It exclusively supports translations in Spanish (es) and French (fr), and provides a description for context-aware translation.

The site will fallback to the best suited language if none of the locales match. It will look for matching languages (i.e., en-US and en-GB), as well as the other preferred languages the user has set in their browser. If all else fails, then it will fallback to the default language.

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
      projectId={GT_PROJECT_ID}
      devApiKey={GT_API_KEY}
      locales={['en-US', 'es', 'fr']} 
    >
      <App />
    </GTProvider>
  </StrictMode>
);

Using the id prop for subsets

Specify the id prop to select a subset of the dictionaries for translation.

In this example, any useGT() and useElement() hooks will only have access to the prefix1.prefix2 subset of the dictionary.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: <>Hello, Alice</>,
    }
  }
};

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
      projectId={GT_PROJECT_ID}
      devApiKey={GT_API_KEY}
      id="prefix1.prefix2"
    >
      <App />
    </GTProvider>
  </StrictMode>
);

Notes

• The <GTProvider> must wrap all <T> components and other translation-related components in client components. Read more about it here.
• For server-side translations, <GTProvider> is not required but can still be used.

Next steps

• Learn more about the <T> component for translating text and components.
• See i18n configuration for advanced customization options.