# gt-react: General Translation React SDK: loadTranslations
URL: https://generaltranslation.com/en-US/docs/react/api/config/load-translations.mdx
---
title: loadTranslations
description: API reference for the loadTranslations() function
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `loadTranslations` function is the primary way to customize translation loading behavior.

In production, your translations need to be stored so that they can be rendered in your app.
By default, your translations will be stored in the GT CDN.
You can specify a `loadTranslations` function to get translations from a different source, such as:
 * From your app's bundle (most common)
 * From a database
 * From an API
 * From a different CDN

We have integrated support for loading translations from local files in your app's bundle.
Follow [this guide](/docs/react/guides/local-tx) to set up local translations in your React app.

## Reference

### Parameters
<TypeTable
  type={{
    "locale": {
        type: 'string',
        optional: false,
    },
  }}
/>

### Description
| Type | Description |
| ---- | ----------- |
| `locale` | The locale for which translations should be loaded. |

### Returns

A `Promise<any>` that resolves to either a string or JSX object containing the translations for the given locale.

---

## Setup

You must import the `loadTranslations` function and assign it as a prop to the `<GTProvider>` component.

```jsx title="src/index.js"
import loadTranslations from './loadTranslations';

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

---

## Examples

### Load translations from local files

When configured to use [local translations](/docs/react/guides/local-tx), the [`gtx-cli translate`](/docs/cli/translate) command, translations are saved to the `./src/_gt` directory.

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
};
```

### Load translations from your own CDN

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};
```

---

## Notes
 * `loadTranslations` gives you the ability to customize how translations are loaded in your app in production.
 * Its most common use case is for adding [local translations](/docs/react/guides/local-tx)

## Next steps