Localazy is an automated translation management platform that supports a wide variety of frameworks and an even wider range of formats through its integrations.

And as I’ll show shortly, it works seamlessly with react-i18next. Thanks to that, managing translation strings, even in open-source projects where anybody can contribute, is a piece of cake 🍰.

🙄 tl;dr 🔗

  • Sign up for Localazy,
  • create a new project with English as the source language,
  • select the React integration option and install Localazy CLI,
  • install and configure react-18next,
  • create localazy.json in root and paste in and modify the configuration,
  • create locales folder and in it, create en.json. Add any translation key-value pair,
  • run localazy upload,
  • in Localazy, add any language. Then review it and accept the suggested phrases,
  • run localazy download and check the locales folder for the new locale,
  • and finally, run the app npm run start.

🚀 Sign up for free 🔗

First of all, let’s set up a new account on Localazy and create a new application. In this article, we’ll use English as the source language, but you can generally choose any other.

article-image

Select React on the integration screen. You can simply drop your files into the file upload zone, but it is much better to use the powerful CLI tool to automate the upload and download of strings and translations. Installation is available for Linux, MacOS, and Windows.

👍 Learn how to use the Localazy CLI like a pro in the ultimate guide.

⚙️ Set up your React app 🔗

If you don’t want to follow the step-by-step guide here, you can take a look at the finished repo. Otherwise, stay a while and listen.

Create a new React project with npx create-react-app react-i18next-example. Once everything is installed, add react-i18next.

npm install react-i18next i18next --save

Now it’s time to add the integration with Localazy. Create localazy.json in the root folder and paste the following configuration. Use the write and read keys from the example config on the integration guide page.

{
    "writeKey": "your-write-key",
    "readKey": "your-read-key",

    "upload": {  
      "type": "json",
      "files": "src/assets/locales/en.json"         
    },
    
    "download": {
      "files": "src/assets/locales/${lang}.json"
    }
}

Additionally, create the src/assets/locales folder and the en.json file inside. Since we’ve set English to be the source language, this file will contain the source phrases for our application. You can fill in any key-value pair you like. I’ll add this:

{
    "translation": {
        "hello": "Hello, my friend",
        "stay_awhile_and_listen": "Stay awhile and listen"
    }
}

At this point, the application is ready to have localization managed by Localazy. Before we upload the first bunch of strings, let’s prepare a test scenario with react-18next to get it off our plates.

First, create i18n.js in the src folder.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from "./assets/locales/en.json"

const resources = {
    en
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en",
    interpolation: {
      escapeValue: false
    }
  });


export default i18n;

Then modify index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import "./i18n"
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

And then App.js.

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
        <h1>{t('hello')}</h1>
        <h2>{t('stay_awhile_and_listen')}</h2>
    </div>
  );
}

export default App;

When you run npm run start, you should see the two English phrases. Nothing fancy so far.

🚩 Using Localazy 🔗

Upload your strings 🔗

Let’s upload the English file to Localazy. From the root folder, run the following command:

localazy upload -s

The -s argument stands for simulate. It is a good practice to test out the configuration without uploading anything to ensure that nothing unexpected happens (such as some of the key-value pairs being incorrectly matched and overriding each other). The output should be something along these lines, depending on the CLI version.

Localazy CLI, v1.1.9
Advanced file uploader/downloader for the Localazy translation platform.

Read more information at https://localazy.com/docs/cli

Uploading...
  - deprecate missing: false
  - import as new: false
  - app version: 0
  - groups: (default only)
  - folder: .

Processing files...

./src/assets/locales/en.json
  (file=file.json, lang=inherited, type=json)

Verifying...

Validating...

Done.

Everything worked out well, and our English file was matched. This time, let’s upload it for real.

localazy upload

Refresh your Localazy dashboard, and you should see the English language on the list.

article-image

Add new languages and translate 🔗

Click the Add Languages button and add your languages to translate. If you check the "Pre-translate selected languages with Machine Translations" checkbox, you will be able to translate the strings immediately using one of the available MT engines, saving precious time. I am going to add Spanish as an example.

article-image
🌟 Learn how to automate machine translations with each upload

Generally, Localazy offers three approaches to choose from and blend to translate your project:

  1. 💪🏻 Translate on your own or invite contributors - You can start translating on your own and use our built-in suggestion system.
  2. 🦾 Translate everything in bulk via machine translation - You can instantly translate all strings by running a machine translation over the content. This is great for the first iteration and localization testing of your React project.
  3. 🚩 Fully automate the translation process with the Continuous Localization services - Once your Localazy integration is set up, you can order translations from our vetted translators and get your project translated by professionals automatically. The service is also proactive, so you don't have to micromanage translators, and you can visit Localazy only once in a while to check the progress.
🧑‍💼🙋‍♀️ Learn more about Localazy's Professional Translation services

Download the translations 🔗

It’s time to go back to the React project.

localazy download

With this command, you’ll download all the translated languages. In the locales folder, we can see there is a new file called es.json.

The last thing to be done is to update i18n.js, add the Spanish locale resource file, and switch the app’s language.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from "./assets/locales/en.json"
import es from "./assets/locales/es.json"

const resources = {
    en,
    es
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "es",
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


export default i18n;

Now when you run the app again, you’ll see that the phrases were correctly translated to Spanish.

✔️ Closing words 🔗

That's all for now! I hope you’ve enjoyed this short intro to Localazy with react-i18next. Check out the related articles, and feel free to ask your questions in the comments.