Useful hook for Google Translate API.
See demo
npm install --save react-google-translate @google-cloud/translate
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]
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 ?? ''
})
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>
)
}
}
Set the default language for the translation.
Skips the request if true.
Calls the api to translate the given text and language.
Indicates that loading state.
Translated text received from the hook.
Indicates that hook has been triggered.
MIT © geminstall23