General Translation  

React Quickstart (5m)

Internationalize your React App in 5 minutes with General Translation

Overview

This guide describes how to internationalize an existing React project.

We will cover 4 simple steps:

Installing the required libraries

Select languages

Add the <T> component

Add your environment variables

This entire process should take under 5 minutes.

Setup

1. Install libraries

Install the gt-react and gt-react-cli libraries.

npm i gt-react
npm i gt-react-cli --save-dev

2. Select languages

<GTProvider> is used to configure the behavior of gt-react. It should be placed as high up in your app as possible, ideally at the root.

Just pass a list of locale codes to add them to your app.

App.js
import { GTProvider } from "gt-react";
import MyApp from "./MyApp";
 
export default function App() {
  return (
    <GTProvider locales={['fr', 'zh']}> // French and Chinese support
      <MyApp />
    </GTProvider> 
  );
}

For a full list of <GTProvider> props and extended documentation, see the API reference.

3. Add the <T> component

Wrap any nested JSX content in the <T> component to make it translatable. For more information, check out the guide on using <T> components.

Example.js
import { T } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated.
      </p>
    </T>  
  );
}

Use the <Var> component to designate JSX content that should not be translated.

Example.js
import { T, Var } from "gt-react";
 
export default function Example() {
  return (
    <T>
      <p>
        This gets translated. <Var>This does not.</Var>
      </p>
    </T>  
  );
}

Tip: To save time, run the setup command. This will scan your codebase for translatable JSX and insert the <T> tags for you.

shell
npx gt-react-cli setup

For strings, you can use useGT() for translation. For more information, check out this guide.

Example.js
import { useGT } from "gt-react";
 
export default function Example() {
  const t = useGT(); 
  return (
    <p>
      {t("This gets translated.")}
    </p>
  );
}

4. Add your environment variables

Add your API key and Project ID to your environment variables.

Navigate to the Dashboard.

  • Navigate to the Developer Keys page in the sidebar.

Click Create Dev API Key then copy the API key and Project ID to your clipboard.

Add the Project ID and API Key to your environment variables. Depending on your React framework, the environment variables may look slightly different. These instructions are for DEVELOPMENT ENVIRONMENTS ONLY.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Protect Your API Keys!

React environment variables are often bundled into your application at build time and are publicly visible in the client-side code. For security reasons, you should:

  • Only use development API keys during local development
  • Only use production API keys with the CLI tool for deployment
  • Never include any API keys as environment variables in production

Let's try it out!

Congratulations! 🥳 Your app is now multilingual! Let's see it in action.

See Your App in a Different Language

Start by changing your preferred browser's language settings. This will change which language is displayed.

  • Change your language in Chrome
  • Change your language in Firefox
  • Change your language in Edge

Start your React app in development mode.

npm run dev

Open up your app in your preferred browser (usually at http://localhost:3000). If you want to switch languages, just select a different language in your browser settings and refresh the page.

Troubleshooting

Shipping to Production

Follow our guide on shipping to production.

Next steps

Previous

Introduction

Next

Next.js Quickstart (5m)

On this page

Overview
Setup
1. Install libraries
2. Select languages
3. Add the <T> component
4. Add your environment variables
Let's try it out!
See Your App in a Different Language
Troubleshooting
Shipping to Production
Next steps