React-google-translate NPM

react-google-translate

Useful hook for Google Translate API.

Demo

Install

npm install --save react-google-translate @google-cloud/translate

Environment variables

Generate your credentials and project id in Google Cloud Platform. Read through the documentation for setting a service account.

After you acquired your credentials and project id, add it to your environment variables.

GCP_PRIVATE_KEY=[private_key]
GCP_CLIENT_EMAIL=[client_email]
GCP_PROJECT_ID=[project_id]

Setting up the config

In your index.js,

import { setConfig } from 'react-google-translate'

setConfig({
  clientEmail: process.env.REACT_APP_GCP_CLIENT_EMAIL ?? '',
  privateKey: process.env.REACT_APP_GCP_PRIVATE_KEY ?? '',
  projectId: process.env.REACT_APP_GCP_PROJECT_ID ?? ''
})

Usage

import React, { useState, useEffect } from 'react'

import { useLazyTranslate } from 'react-google-translate'

const Example = () => {

  const [text] = useState('test');
  const [language] = useState('zh-CN');

  const [translate, { data, loading }] = useLazyTranslate({
    language
  })

  useEffect(() => {
    if (text) {
      translate(text, language);
    }
  }, [translate, text])

  render() {
    return (
      <div>{loading ? 'Loading...' : data}</div>
    )
  }
}