John-Daniels/react-google-multi-lang

A React package for translating website content using Google Cloud Translation API

react-google-multi-lang

A React library to support multi-language translation in React apps using Google Translation API.

Installation

To install the package, run:

npm install react-google-multi-lang

Usage

1. Set up the Translation Provider

Wrap your application with the TranslationProvider component. Pass your Google Translation API key as a prop to the TranslationProvider.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { TranslationProvider } from 'react-google-multi-lang';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <TranslationProvider apiKey={process.env.REACT_APP_TRANSLATION_API} defaultLanguage="en">
        <App />
    </TranslationProvider>
  </React.StrictMode>
);

//with navigation

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <TranslationProvider apiKey={translate} defaultLanguage="en">
      <App />
    </TranslationProvider>
  </BrowserRouter>

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2. Create a Custom Language Switcher

Use the useTranslation hook to create a custom language switcher.

// src/CustomLanguageSwitcher.js
import React from 'react';
import { useTranslation } from 'react-google-multi-lang';

const CustomLanguageSwitcher = () => {
  const { setLanguage } = useTranslation();

  return (
    <div>
      <button onClick={() => setLanguage('en')}>English</button>
      <button onClick={() => setLanguage('es')}>Spanish</button>
      <button onClick={() => setLanguage('fr')}>French</button>
    </div>
  );
};

export default CustomLanguageSwitcher;

3. Wrap Components with withTranslation

Wrap the components you want to translate with the withTranslation higher-order component.

// src/MyComponent.js
import React from 'react';
import { withTranslation } from 'react-google-multi-lang';

const MyComponent = () => (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a translatable text.</p>
  </div>
);

export default withTranslation(MyComponent);

4. Use the Translated Components

Use the wrapped components in your application.

// src/App.js
import React from 'react';
import CustomLanguageSwitcher from './CustomLanguageSwitcher';
import MyComponent from './MyComponent';

const App = () => (
  <div>
    <CustomLanguageSwitcher />
    <MyComponent />
  </div>
);

export default App;

Props

TranslationProvider

• apiKey (string, required): Your Google Translation API key.
• defaultLanguage (string, optional): The default language of the site. Defaults to 'en'.

Custom Hooks

useTranslation

Use the useTranslation hook to get access to the setLanguage function.

const { setLanguage } = useTranslation();

Example

Here is a complete example of how to use the package in your project.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { TranslationProvider } from 'react-google-multi-lang';

ReactDOM.render(
  
    <App />
  </TranslationProvider>,
  document.getElementById('root')
);

or
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <TranslationProvider apiKey={translate} defaultLanguage="en">
      <App />
    </TranslationProvider>
  </BrowserRouter>

// src/CustomLanguageSwitcher.js
import React from 'react';
import { useTranslation } from 'react-google-multi-lang';

const CustomLanguageSwitcher = () => {
  const { setLanguage } = useTranslation();

  return (
    <div>
      <button onClick={() => setLanguage('en')}>English</button>
      <button onClick={() => setLanguage('es')}>Spanish</button>
      <button onClick={() => setLanguage('fr')}>French</button>
    </div>
  );
};

export default CustomLanguageSwitcher;

// src/MyComponent.js
import React from 'react';
import { withTranslation } from 'react-google-multi-lang';

const MyComponent = () => (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a translatable text.</p>
  </div>
);

export default withTranslation(MyComponent);

// src/App.js
import React from 'react';
import CustomLanguageSwitcher from './CustomLanguageSwitcher';
import MyComponent from './MyComponent';

const App = () => (
  <div>
    <CustomLanguageSwitcher />
    <MyComponent />
  </div>
);

export default App;

License

MIT © Boniface Mwanza