How to localize React app with react-i18next and Localazy
Tags: react, reacti18next, localazy, localization
Published: 2020-11-30 17:59:38


Localization is hardly the most favorite part of development for anyone. Regardless of whether it is a web, mobile, or desktop app, it is time-consuming and error-prone. This article will show you that there is a quick and seamless way to integrate localization that does not slow down development. We'll use Localazy and react-i18next.

Localazy is a universal localization management platform that supports a wide variety of frameworks and an even wider range of formats through its CLI. Localazy's most prominent features are a pro-active review process, highly accurate translation memory supported by community-shared translations and non-disturbing, and crystal clear UI which is not bloated with rarely used options. And as I'll show shortly, it works seamlessly with react-i18next. Thanks to that, managing translation strings, even with open-source projects where anybody can contribute (with varying quality), is a piece of cake 🍰.

## tldr;
- sign up for [Localazy](https://localazy.com/register),
- [create an app](https://localazy.com/my/create) with English as source language and *Use community translations (ShareTM)* option enabled,
- select *React* integration option and install Localazy [CLI](https://testing.localazy.com/docs/cli/installation),
- install and configure [react-18next](https://react.i18next.com/),
- create `localazy.json` in root and paste in and modify the [configuration](https://localazy.com/docs/cli/quick-start-json)
- 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 locales folder for the new locale,
-  run the app `npm run start`

## Sign up and app creation
First of all, let's [set up a new account](https://localazy.com/register) on Localazy and create a [new application](https://localazy.com/my/create). In this article, we'll use English as the source language, but you can generally choose any other. Make sure that the *Use community translations (ShareTM)* option is enabled. [ShareTM](https://localazy.com/docs/general/what-is-localazy-sharetm) is the highly accurate translation memory I mentioned. Thanks to it, most of the new applications have as much as 50 % of their strings automatically available for translation into 80+ languages.

Proceed to create the app. Afterward, select _React_ on the integration screen. We'll use the powerful CLI tool to manage the upload and download of phrases. [Installation](https://testing.localazy.com/docs/cli/installation) is available for Linux, MacOS and Windows. Note the read and write keys in step 2. We'll need it shortly.

## Set up React app
If you don't want to follow the step-by-step guide here, you can take a look at the [finished repo](https://github.com/localazy/react-i18next-example). Otherwise, stay awhile and listen.

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

```bash
npm install react-i18next i18next --save
```

Now it's time to add integration with Localazy. Create `localazy.json` in the root folder and paste the following configuration. Use the write and read keys from the step 2 of the integration guide page. 
```json
{
    "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 `src/assets/locales` folder and `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.

```json
{
    "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 src folder.
```javascript
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`.
```javascript
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`
```react
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.


## Uploading and downloading phrases
Let's upload the English file to Localazy. From the root folder, run the following command
```bash
localazy upload -s
```

The `-s` argument stands for simulate. It is a good practice to test out the configuration without uploading anything to assure that nothing unexpected happens (such as some of the key-value pairs are incorrectly matched and override 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 let upload it for real.
```bash
localazy upload
```

Refresh your app page and you should see the English language on the list. Open the _Add languages_ tab and there you find a couple of languages with info about the percentage of automated translations. It is possible that you will see either 50 % or 100 %. The automated matching with ShareTM improves all the time and it's likely that thanks to this article you would have all the phrases automatically translated. How cool is that? 🙂

![alt text](https://directus.localazy.com/_/assets/add_language_screen.png "ShareTM suggestions")

One way or another, look up Spanish and add it to your app. You'll see there is a review button. Every time ShareTM provides a translation suggestion it will have candidate status. This means that it will be ready for review and any reviewer can either approve it or decline. Go ahead and approve the suggested phrase(s). 

In case that the ShareTM did not translate 100 % of phrases, come back to the languages list and notice that the review button now reads translate. Localazy recognizes that there is nothing to review but still something to translate, so it offers you the next most likely action in one click. Translate the other phrase (you may use a suggested phrase on the translation page). This time you do not need to go through the review process since you are a trusted translator as owner by default, so the translation is immediately approved.

It's time to go back to the React project.
```bash
localazy download
```

With this command, you'll download all the newly accepted phrases and newly added languages. In the _locales_ folder, we can see there is newly `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.
```javascript
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
I hope you've enjoyed this short intro into Localazy with react-i18next. If you'd like to get closer to us, join us on [Discord](https://discord.gg/CAVhHrh).

---
This article was originally published on [Localazy](https://https:/localazy.com/blog/how-to-localize-react-app-with-react-i18next-and-localazy)