Internationalization of React App using Google Sheet and react-i18n

4 min readApr 25, 2020

Google sheet can be used as an excellent tool for internationalization in React App. It sounds strange but let me explain.

for Internationalisation, we need to maintain a big JSON file that holds the lang-keys and its translations. call it, langData.json.

generally, langData.json is part of code repo and every time, product manager/owner wants some change, the developer needs to make a change in the codebase.

Google sheet as JSON Hosting

We can host this langData.json over Google sheet. Think, Google sheet as JSON hosting website. In this article, we will learn to use an npm-package, which converts a Google-Sheet into a JSON file.

So, In the improved workflow, We make changes in lang-keys/values in Google sheet and they will be automatically reflected inside the React App.

Thanks, Jan Mühlemann(Co-Founder of http://locize.com. Maintainer of i18n ecosystem http://i18next.com) for appreciating my efforts.

Before we jump in Code/Implementation/Demo. Let's highlight the advantages.

Advantages

Product Manager/Owner can make changes in translations.
We can Google Translation service for automatic translations.

In this article, we are going to make the following UI from scratch.

Lets Code now

Step1 — Set Basic Example

Let start with basic CRA example

npx create-react-app my-react-app --template typescript
cd my-react-app
npm start

This will make the basic CRA app. I opted for TypeScript.

Here is the very simple demo of input field validation and we will do internationalization (localization) of below UI.

We created an `input` element and added a live-validation. Here is the coding for the above UI.

Step2 — Translate

Now we will use a Google Sheet to translate our lang Strings like

Type your name
Name must be between 5 to 20 characters

Make a Google sheet like this

Think row as one JavaScript object and multiple rows as “Array of Object”.

Now, we will use GoogleTranslate Formula to automatically translate our lang strings.

Like this,

=GOOGLETRANSLATE($A3, "en", C$1)

Please note that __MIN__ and __MAX are the variables, and should not be translated.

Also, note down the spreadsheet id.

16hT54P8eB1Fw7nR243AASjimhEedJIQzYtclQH0Wt08

Now, we will make it public so that we can download as JSON.

Step3 — Download Google Sheet as a JSON file.

npm install sheet-to-array-of-objects

the above package will help us converting the Sheet to JSON. I wrote this npm package, almost 5–6 years ago.

touch build/getLangData.js

add the following content.

and add the following script to `package.json`

"prebuild": "node build/getLangData.js",

This script will download the langData.json file before every build. when you run the script, it will convert GoogleSheet into a JSON file like this.

Step4 — Add React-i18Next in the codebase.

at the final step, let's add react-i18next

the quick start guide is helpful — https://react.i18next.com/guides/quick-start

npm install react-i18next i18next --save
touch src/i18n.js

if you notice the quickstart guide, the format for the langData.json is like this

const resources = {    en: {        translation: {           "KEY": "VAL",
        },    },};

which is different than our langData.json. So, we will write a transformer function for this conversion. and our final i18n.ts file will look like this.

Now, let's add translation in App.tsx.