React Translate with Google API
A simple react package develope to translate text using Google Translate API. You can use component or the simple hook.
📝 Table of Contents
🧐 About
Pass your string as a children to component and provide language to the component it will translate the string to the language you provided.
Installation
Let's start with the following steps.
-
Now run the following code in project directory to install dependency.
npm i @girishsawant999/react-translate-with-google-api
-
Thats all you are ready to use translate component.
Usage
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 and add following code in index.js file.
import { setupConfig } from '@girishsawant999/react-translate-with-google-api';
setupConfig({
clientEmail: process.env.REACT_APP_GCP_CLIENT_SERVICE_ACC_EMAIL,
privateKey: process.env.REACT_APP_GCP_PRIVATE_KEY,
projectId: process.env.REACT_APP_GCP_PROJECT_ID
});
Now use Translate component
import Translate from '@girishsawant999/react-translate-with-google-api';
<Translate language="fr" className="font-bold" style={{ color: 'red' }}>
Hello World
</Translate>;
You will see output as "Bonjour le monde".
Props | Description |
---|---|
language | Type: String Language code check here eg. fr | mr | hi | en-US
|
skip (optional) | Type: Boolean Skip translation API call. |
useStorage (optional) | Type: Boolean Use local storage to store translation. |
Also You can use the useTranslate hook to translate the string.
import { useTranslate } from '@girishsawant999/react-translate-with-google-api';
const language = 'fr';
const options = {
skip: false, // skip translation API call
useStorage: true // use local storage to store the translation
};
const { translatedData, loading } = useTranslate(
language,
{
emailAddress: 'email address',
firstName: 'first name',
lastName: 'last name'
},
options
);
return (
<div>
{loading ? <div>Loading...</div> : null}
<div>
<label>
<Translate language="fr" className="font-bold" style={{ color: 'red' }}>
Email Address
</Translate>
<input type="text" placeholder={translatedData.emailAddress} />
</label>
</div>
</div>
);
You will get the translated data and loading status. Also you can use getLanguages
function to get available languages.
⛏️ Built Using
✍️ Authors
- @girishsawant999 - Idea & Initial work
See also the list of contributors who participated in this project.