Internationalization of React App using Google Sheet and react-i18n

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

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,

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

Also, note down the spreadsheet id.

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

Step3 — Download Google Sheet as a JSON file.

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

add the following content.

and add the following script to `package.json`

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

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

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.

and finally, when we change language from i18n.ts, we get language-specific UI.

But still, the last piece is missing. Language-Switcher. we need a dropdown to switch the language.

Step5 — Language Switcher

Demo

so, finally, its demo time.

Source Code:

all the source code is available at — https://github.com/nsisodiya/react-i18n-with-google-sheet

More info

  1. Google Translate Function — https://support.google.com/docs/answer/3093331?hl=en
  2. NPM package which converts Google sheet to JSON — https://www.npmjs.com/package/sheet-to-array-of-objects
  3. Source Code of demo — https://github.com/nsisodiya/react-i18n-with-google-sheet

12+yrs exp. JavaScript Expert. Full Stack Expert. React, Nodejs Mongo AWS, Terraform Pulumi. IITian, Open Source. Currently Software Architect @ Prophecy.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store