react-google-translate

> Useful hook for Google Translate API.

 

Demo

See demo

Install

``bash
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,

`tsx
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

`tsx
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 (



)
}
}
``

Props

$3

Set the default language for the translation.

$3

Skips the request if true.

API

$3

Calls the api to translate the given text and language.

$3

Indicates that loading state.

$3

Translated text received from the hook.

$3

Indicates that hook has been triggered.

License

MIT © geminstall23