Manage Locales

Overview

This document provides guidance on how to manage locales in your React application with the gt-react. We will walk through configuring the list of locales you want to support, then triggering the generation of translations. We will also cover how to pass the config file to your app.

This library uses the BCP-47 standard to define locales. See a list of currently supported locales here.

Configuring locales

There are two ways to change your locales for production:

1. The CLI tool
2. The gt.config.json file (preferred)

Managing locales with the CLI tool

The simplest way to manage locales is specifying them through the npx gt-react-cli translate command by using the --locales flag.

{
  "scripts": {
    "build": "npx gt-react-cli translate --locales zh jp && <YOUR_BUILD_COMMAND>"
  }
}

This will generate translations for Chinese (zh) and Japanese (jp).

Make sure that your app knows that these locales are supported by passing the config file to the GTProvider component.

import { GTProvider } from 'gt-react';
import config from './gt.config.json';
 
function App() {
  return (
    <GTProvider locales={["zh", "jp"]}>
      <YourApp />
    </GTProvider>
  );
}

Using gt.config.json (preferred)

A more robust way of managing locales is by using the gt.config.json file. you can specify the list of locales you want to support with the locales property.

{
  "locales": ["zh", "jp"],
}

Then just pass the config file to your GTProvider component.

import { GTProvider } from 'gt-react';
import config from './gt.config.json';
 
function App() {
  return (
    <GTProvider {...config}>
      <YourApp />
    </GTProvider>
  );
}

The final step is to add the translate command to your build script. You do not need to specify locales with the --locales flag because they are already defined in the gt.config.json file.

{
  "scripts": {
    "build": "npx gt-react-cli translate && <YOUR_BUILD_COMMAND>"
  }
}

Whitelisted locales

As an optional feature, you can add a list of whitelisted locales. This is accessible through the dashboard under the Project Locales page. If you enable this feature, any attempts to call npx translate with non-whitelisted locales will fail.

Notes

• You can manage locales through the dashboard, the gt.config.json file, or the CLI tool.
• Remember to pass the locales to <GTProvider> in your app.

Next Steps

• Learn about the locale syntax in the Locale Strings reference.