@girishsawant999/react-translate-with-google-api N

📝 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.