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

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
• Installation
• Usage
• Built Using
• Contributing
• 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.

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

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

• React
• Parcel
• Typescript
• Javascript
• Jest

✍️ Authors

• @girishsawant999 - Idea & Initial work

See also the list of contributors who participated in this project.