React Quickstart

Overview

This guide describes how to internationalize an existing React project.

We will cover 4 simple steps:

This entire process should take under 5 minutes.

Setup

1. Install libraries

Install the gt-react and gtx-cli libraries.

npm i gt-react
npm i gtx-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.

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

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.

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

npx gtx-cli setup

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

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.

VITE_GT_API_KEY="YOUR_GT_DEV_API_KEY"
VITE_GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

Let's try it out!

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

See Your App in a Different Language

npm run dev 

Troubleshooting

Shipping to Production

Follow our guide on shipping to production.

Next steps

• See our React API reference for detailed information about the <T> component and other available components.
• Create a list of approved languages for your app with the React plugin.