# gt-react: General Translation React SDK: GTProvider
URL: https://generaltranslation.com/en-US/docs/react/api/components/gtprovider.mdx
---
title: GTProvider
description: API reference for the GTProvider component
---

## 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>`](/docs/react/guides/t) and [dictionaries](/docs/react/guides/dictionaries).

## Reference

### Props

<TypeTable
  type={{
    children: {
      type: 'ReactNode',
      optional: false,
    },
    projectId: {
      type: 'string',
      optional: true,
    },
    'id?': {
      type: 'string',
      optional: true,
      default: 'undefined',
    },
    '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,
    },
    'metadata?': {
      type: 'object',
      optional: true,
    },
  }}
/>

### 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](/docs/platform/supported-locales) to enable translation.

```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(
  <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`](/docs/react/api/dictionary/use-translations) hook.

```jsx title="index.js" copy
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, check out this [guide](/docs/react/guides/dictionaries).

### 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 [`gtx-cli translate` command](/docs/cli/translate), so you don't have to specify things like locales manually as a parameter.

```json title="gt.config.json" copy
{
  "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.

```jsx title="index.js" copy
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.

```jsx title="index.js" copy
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 controls the loading behavior 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 to use to load translations (`"skeleton"`, `"replace"`, or `"default"`).

```jsx title="index.js" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  <App />
</GTProvider>
```

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

---

## Notes

- The `<GTProvider>` must wrap all [`<T>` components](/docs/react/api/components/t) and other translation-related functions. Learn more [here](/docs/react/api/components/gtprovider).

## Next steps

- Learn more about the [`<T>` component](/docs/react/guides/t) for translating text and components.