How to Use Google Translate API

An easy follow-along tutorial

Prerequisites: Knowledge of React.js will be required for this tutorial.

We’re going to use google-translate library to help connect your app with Google Translate API, the library also provides methods to initiate the translating. We’ll also use react-cookies library to store a user’s chosen language in the browser for the user’s convenience and we’ll store some translated text in a cookie so that the same sentence doesn’t have to be re-translated every time the user loads the app (you have to pay per translation, try to avoid redundant translating).

1. Let’s get started, in terminal:

create-react-app google-translate-demo
cd google-translate-demo
npm i google-translate
npm i react-cookies

2. Get ready to create your API key and hide the key so that it doesn’t get pushed onto the internet. In terminal:

touch .env
open .env

3. Sign into Google API Console with your Gmail then create your API key: