A simple react package develope to translate text using Google Translate API. You can use component or the simple hook.
## 📝 Table of Contents
- [About](#about)
- [Installation](#installation)
- [Usage](#usage)
- [Built Using](#built_using)
- [Contributing](./.github/CONTRIBUTING.md)
- [Authors](#authors)
## 🧐 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.
```bash
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](https://cloud.google.com/iam/docs/creating-managing-service-accounts) 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.
```jsx
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
```jsx
import Translate from '@girishsawant999/react-translate-with-google-api';
Hello World
;
```
You will see output as "Bonjour le monde".
| Props | Description |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| language | Type: **String** Language code [check here](https://cloud.google.com/translate/docs/languages) 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.
```jsx
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 (
{loading ?
Loading...
: null}
);
```
You will get the translated data and loading status. Also you can use `getLanguages` function to get available languages.
## ⛏️ Built Using
- [React](https://reactjs.org)
- [Parcel](https://parceljs.org)
- [Typescript](https://www.typescriptlang.org)
- [Javascript](https://developer.mozilla.org/en-US/)
- [Jest](https://jestjs.io)
## ✍️ Authors
- [@girishsawant999](https://girishsawant999.github.io) - Idea & Initial work
See also the list of [contributors](https://github.com/girishsawant999/react-translate-with-google-api/contributors) who participated in this project.
---
_Source: https://npm.io/package/@girishsawant999/react-translate-with-google-api · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
