Internationalization of React App using Google Sheet and react-i18n

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.

Advantages

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

Lets Code now

Step1 — Set Basic Example

npx create-react-app my-react-app --template typescript
cd my-react-app
npm start
  • Type your name
  • Name must be between 5 to 20 characters
=GOOGLETRANSLATE($A3, "en", C$1)
16hT54P8eB1Fw7nR243AASjimhEedJIQzYtclQH0Wt08
npm install sheet-to-array-of-objects
touch build/getLangData.js
"prebuild": "node build/getLangData.js",
npm install react-i18next i18next --save
touch src/i18n.js
const resources = {    en: {        translation: {           "KEY": "VAL",
},
},};

Demo

so, finally, its demo time.

Source Code:

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

  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

--

--

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
Narendra Sisodiya

Narendra Sisodiya

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