React Custom Google Translate

A comprehensive React package for integrating Google Translate with a custom language selector, hidden Google branding, and TypeScript support.

Features

• 🌐 Easy Google Translate Integration - Works with React projects
• 🎨 Custom Language Selector - Beautiful, customizable dropdown with your exact design
• 🔒 Hidden Google Branding - No Google Translate UI elements visible
• 💾 Persistent Selection - Remembers user's language choice
• 🎯 TypeScript Support - Full type definitions included
• 🚀 Automatic CSS Injection - No manual CSS imports needed
• 🌍 100+ Languages - Support for all Google Translate languages
• 🔧 Simple API - Just import and use, no complex setup
• 📱 Mobile Scanner - Optional QR code scanner for mobile apps
• 🛡️ Translation Protection - Prevents dropdown from being translated

Installation

npm install react-custom-google-translate

or

yarn add react-custom-google-translate

🚀 Quick Start Guide

Step 1: Setup Provider in Your App

Wrap your entire application with the GoogleTranslateProvider:

// App.tsx or App.jsx
import React from "react";
import { GoogleTranslateProvider } from "react-custom-google-translate";
import Header from "./components/Header";
import Footer from "./components/Footer";

function App() {
  return (
    <GoogleTranslateProvider pageLanguage="en">
      <div className="App">
        <Header />
        <main>{/* Your app content */}</main>
        <Footer />
      </div>
    </GoogleTranslateProvider>
  );
}

export default App;

Step 2: Add Language Selector to Header

Import and use the LanguageSelector component in your header:

// components/Header.tsx
import React from "react";
import { LanguageSelector } from "react-custom-google-translate";

export default function Header() {
  return (
    <header className="bg-blue-600 p-4">
      <div className="flex justify-between items-center">
        <div className="logo">
          <h1 className="text-white text-xl">Your Company</h1>
        </div>

        <nav className="flex items-center space-x-6">
          <div className="nav-links hidden md:flex space-x-4">
            <a href="#" className="text-white hover:text-blue-200">
              Home
            </a>
            <a href="#" className="text-white hover:text-blue-200">
              About
            </a>
            <a href="#" className="text-white hover:text-blue-200">
              Services
            </a>
            <a href="#" className="text-white hover:text-blue-200">
              Contact
            </a>
          </div>

          {/* ✅ Simple - just import and use */}
          <LanguageSelector />
        </nav>
      </div>
    </header>
  );
}

Step 3: Configure Custom Languages (Optional)

Choose which languages to support for your specific audience:

// App.tsx
import React from "react";
import { GoogleTranslateProvider } from "react-custom-google-translate";

// Define your target languages
const customLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|it", label: "Italiano" },
  { value: "en|pt", label: "Português" },
  { value: "en|ar", label: "العربية" },
  { value: "en|zh", label: "中文" },
  { value: "en|ja", label: "日本語" },
  { value: "en|hi", label: "हिंदी" },
];

function App() {
  return (
    <GoogleTranslateProvider
      pageLanguage="en"
      availableLanguages={customLanguages}
    >
      <div className="App">{/* Your app content */}</div>
    </GoogleTranslateProvider>
  );
}

export default App;

🌍 Language Configuration

Pre-built Language Sets

Choose from our pre-configured language sets:

🇪🇺 European Languages

const europeanLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|it", label: "Italiano" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
  { value: "en|nl", label: "Nederlands" },
  { value: "en|pl", label: "Polski" },
  { value: "en|sv", label: "Svenska" },
  { value: "en|da", label: "Dansk" },
  { value: "en|no", label: "Norsk" },
  { value: "en|fi", label: "Suomi" },
  { value: "en|tr", label: "Türkçe" },
  { value: "en|el", label: "Ελληνικά" },
];

🌏 Asian Languages

const asianLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|zh", label: "中文" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ko", label: "한국어" },
  { value: "en|hi", label: "हिंदी" },
  { value: "en|bn", label: "বাংলা" },
  { value: "en|ur", label: "اردو" },
  { value: "en|ta", label: "தமிழ்" },
  { value: "en|te", label: "తెలుగు" },
  { value: "en|ml", label: "മലയാളം" },
  { value: "en|kn", label: "ಕನ್ನಡ" },
  { value: "en|gu", label: "ગુજરાતી" },
  { value: "en|mr", label: "मराठी" },
  { value: "en|pa", label: "ਪੰਜਾਬੀ" },
  { value: "en|th", label: "ไทย" },
  { value: "en|vi", label: "Tiếng Việt" },
  { value: "en|id", label: "Bahasa Indonesia" },
  { value: "en|ms", label: "Bahasa Melayu" },
];

💼 Business Languages

const businessLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|zh", label: "中文" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ar", label: "العربية" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
  { value: "en|ko", label: "한국어" },
  { value: "en|it", label: "Italiano" },
  { value: "en|nl", label: "Nederlands" },
];

Usage with Custom Languages

<GoogleTranslateProvider availableLanguages={europeanLanguages}>
  <App />
</GoogleTranslateProvider>

📚 Implementation Methods

Method 1: Global Configuration (Recommended)

Configure languages once in your main App component:

// App.tsx
<GoogleTranslateProvider availableLanguages={customLanguages}>
  <App />
</GoogleTranslateProvider>

// components/Header.tsx
<LanguageSelector />

Method 2: Component-Level Configuration

Configure languages for specific components:

// components/Header.tsx
import React from 'react';
import { GoogleTranslateProvider, LanguageSelector } from 'react-custom-google-translate';

const Header = () => {
  const europeanLanguages = [
    { value: "en|en", label: "English" },
    { value: "en|es", label: "Español" },
    { value: "en|fr", label: "Français" },
    { value: "en|de", label: "Deutsch" },
  ];

  return (
    <header>
      <GoogleTranslateProvider availableLanguages# Next.js Google Translate Package

A comprehensive Next.js package for integrating Google Translate with a custom language selector, hidden Google branding, and TypeScript support.

## Features

- 🌐 Easy Google Translate integration for Next.js
- 🎨 Custom language selector component
- 🔒 Hidden Google Translate branding and UI elements
- 💾 Persistent language selection with localStorage
- 🎯 TypeScript support
- 🎛️ Customizable styling and behavior
- 🔧 Context-based state management

## Installation

```bash
npm install next-google-translate

or

yarn add next-google-translate

Quick Start

1. Wrap your app with the GoogleTranslateProvider

React Custom Google Translate

A comprehensive React/Next.js package for integrating Google Translate with a custom language selector, hidden Google branding, and TypeScript support.

Features

• 🌐 Easy Google Translate integration for React/Next.js
• 🎨 Custom language selector component
• 🔒 Hidden Google Translate branding and UI elements
• 💾 Persistent language selection with localStorage
• 🎯 TypeScript support
• 🎛️ Customizable styling and behavior
• 🔧 Context-based state management
• 🌍 Support for 100+ languages
• 🚀 Automatic CSS injection (no manual CSS imports needed)

Installation

npm install react-custom-google-translate

or

yarn add react-custom-google-translate

Quick Start

1. Wrap your app with the GoogleTranslateProvider

// app/layout.tsx or pages/_app.tsx
import { GoogleTranslateProvider } from "react-custom-google-translate";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <GoogleTranslateProvider pageLanguage="en">
          {children}
        </GoogleTranslateProvider>
      </body>
    </html>
  );
}

2. Use the LanguageSelector component

// components/Header.tsx
import { LanguageSelector } from "react-custom-google-translate";

export default function Header() {
  return (
    <header>
      <nav>
        <LanguageSelector />
      </nav>
    </header>
  );
}

3. Use the hook for custom implementations

// components/CustomLanguageSelector.tsx
import { useGoogleTranslate } from "react-custom-google-translate";

export default function CustomLanguageSelector() {
  const { isReady, currentLanguage, changeLanguage, availableLanguages } =
    useGoogleTranslate();

  if (!isReady) return <div>Loading...</div>;

  return (
    <select
      value={`en|${currentLanguage}`}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {availableLanguages.map((lang) => (
        <option key={lang.value} value={lang.value}>
          {lang.label}
        </option>
      ))}
    </select>
  );
}

🌍 Language Configuration

Using Custom Languages (Recommended)

You can specify exactly which languages you want to support:

import { GoogleTranslateProvider } from "react-custom-google-translate";

// Define your custom languages
const customLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|it", label: "Italiano" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ko", label: "한국어" },
  { value: "en|zh", label: "中文" },
];

export default function Layout({ children }) {
  return (
    <GoogleTranslateProvider
      pageLanguage="en"
      availableLanguages={customLanguages}
    >
      <LanguageSelector />
      {children}
    </GoogleTranslateProvider>
  );
}

Pre-configured Language Sets

European Languages

const europeanLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|it", label: "Italiano" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
  { value: "en|nl", label: "Nederlands" },
  { value: "en|pl", label: "Polski" },
  { value: "en|sv", label: "Svenska" },
];

Asian Languages

const asianLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|zh", label: "中文" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ko", label: "한국어" },
  { value: "en|hi", label: "हिंदी" },
  { value: "en|bn", label: "বাংলা" },
  { value: "en|ur", label: "اردو" },
  { value: "en|ta", label: "தமிழ்" },
  { value: "en|te", label: "తెలుగు" },
  { value: "en|th", label: "ไทย" },
  { value: "en|vi", label: "Tiếng Việt" },
  { value: "en|id", label: "Bahasa Indonesia" },
];

Business-Focused Languages

const businessLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|zh", label: "中文" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ar", label: "العربية" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
];

Language Code Format

The format is: "source|target"

• source: Always "en" (your page language)
• target: The Google Translate language code

Common Language Codes

| Language | Code | Native Name | | ---------- | ---- | ---------------- | | English | en | English | | Spanish | es | Español | | French | fr | Français | | German | de | Deutsch | | Italian | it | Italiano | | Portuguese | pt | Português | | Russian | ru | Русский | | Chinese | zh | 中文 | | Japanese | ja | 日本語 | | Korean | ko | 한국어 | | Arabic | ar | العربية | | Hindi | hi | हिंदी | | Bengali | bn | বাংলা | | Urdu | ur | اردو | | Tamil | ta | தமிழ் | | Telugu | te | తెలుగు | | Malayalam | ml | മലയാളം | | Kannada | kn | ಕನ್ನಡ | | Gujarati | gu | ગુજરાતી | | Marathi | mr | मराठी | | Punjabi | pa | ਪੰਜਾਬੀ | | Thai | th | ไทย | | Vietnamese | vi | Tiếng Việt | | Indonesian | id | Bahasa Indonesia | | Turkish | tr | Türkçe | | Dutch | nl | Nederlands | | Polish | pl | Polski | | Swedish | sv | Svenska |

API Reference

GoogleTranslateProvider

Props

| Prop | Type | Default | Description | | -------------------- | ------------------ | ------------------ | -------------------------------- | | pageLanguage | string | 'en' | The source language of your page | | availableLanguages | LanguageOption[] | defaultLanguages | Array of available languages | | children | ReactNode | - | Child components |

Default Languages (If no custom languages provided)

const defaultLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
  { value: "en|it", label: "Italiano" },
  { value: "en|pt", label: "Português" },
  { value: "en|ru", label: "Русский" },
  { value: "en|ja", label: "日本語" },
  { value: "en|ko", label: "한국어" },
  { value: "en|zh", label: "中文" },
  { value: "en|ar", label: "العربية" },
  { value: "en|hi", label: "हिंदी" },
  { value: "en|bn", label: "বাংলা" },
  { value: "en|ur", label: "اردو" },
  { value: "en|ta", label: "தமிழ்" },
  { value: "en|te", label: "తెలుగు" },
  { value: "en|ml", label: "മലയാളം" },
  { value: "en|kn", label: "ಕನ್ನಡ" },
  { value: "en|gu", label: "ગુજરાતી" },
  { value: "en|mr", label: "मराठी" },
  { value: "en|pa", label: "ਪੰਜਾਬੀ" },
  { value: "en|or", label: "ଓଡିଆ" },
  { value: "en|sd", label: "سنڌي" },
];

LanguageSelector

Props

| Prop | Type | Default | Description | | ------------------------- | ---------------------------- | ------------------- | ---------------------------------- | | className | string | '' | CSS class for the container | | buttonClassName | string | '' | CSS class for the button | | dropdownClassName | string | '' | CSS class for the dropdown | | optionClassName | string | '' | CSS class for each option | | selectedOptionClassName | string | '' | CSS class for selected option | | showCheckmark | boolean | true | Show checkmark for selected option | | placeholder | string | 'Switch Language' | Placeholder text | | arrowIcon | ReactNode | defaultArrowIcon | Custom arrow icon | | checkIcon | ReactNode | defaultCheckIcon | Custom check icon | | persistSelection | boolean | true | Persist selection in localStorage | | onLanguageChange | (language: string) => void | - | Callback when language changes |

useGoogleTranslate Hook

Returns an object with:

| Property | Type | Description | | -------------------- | ---------------------------- | --------------------------------- | | isReady | boolean | Whether Google Translate is ready | | currentLanguage | string | Current selected language code | | changeLanguage | (langCode: string) => void | Function to change language | | availableLanguages | LanguageOption[] | Array of available languages |

Styling

The package automatically injects CSS that hides Google Translate's UI elements. No manual CSS imports needed!

You can still customize the language selector appearance:

<LanguageSelector
  className="my-language-selector"
  buttonClassName="px-4 py-2 bg-blue-500 text-white rounded"
  dropdownClassName="bg-white shadow-lg border rounded"
  optionClassName="px-4 py-2 hover:bg-gray-100"
  selectedOptionClassName="bg-blue-50 text-blue-600"
  placeholder="Select Language"
  onLanguageChange={(lang) => console.log("Language changed to:", lang)}
/>

Advanced Usage

With Custom Styling

<LanguageSelector
  className="my-language-selector"
  buttonClassName="px-4 py-2 bg-blue-500 text-white rounded"
  dropdownClassName="bg-white shadow-lg border rounded"
  optionClassName="px-4 py-2 hover:bg-gray-100"
  selectedOptionClassName="bg-blue-50 text-blue-600"
  placeholder="Select Language"
  onLanguageChange={(lang) => console.log("Language changed to:", lang)}
/>

With Custom Icons

<LanguageSelector
  arrowIcon={<ChevronDownIcon />}
  checkIcon={<CheckIcon />}
  showCheckmark={true}
/>

Programmatic Language Change

function MyComponent() {
  const { changeLanguage } = useGoogleTranslate();

  const handleLanguageChange = (langCode: string) => {
    changeLanguage(langCode);
    // Additional logic here
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange("en|es")}>
        Switch to Spanish
      </button>
      <button onClick={() => handleLanguageChange("en|fr")}>
        Switch to French
      </button>
    </div>
  );
}

Without Persistent Storage

<LanguageSelector
  persistSelection={false}
  onLanguageChange={(lang) => {
    // Handle language change in your own way
    console.log("Language changed to:", lang);
  }}
/>

Custom Hook Usage

function LanguageStatus() {
  const { isReady, currentLanguage, availableLanguages } = useGoogleTranslate();

  if (!isReady) {
    return <div>Loading translation service...</div>;
  }

  const currentLangLabel = availableLanguages.find(
    (lang) => lang.value === `en|${currentLanguage}`
  )?.label;

  return (
    <div>
      <p>Current language: {currentLangLabel}</p>
      <p>Available languages: {availableLanguages.length}</p>
    </div>
  );
}

TypeScript Support

The package includes full TypeScript support with type definitions:

import {
  GoogleTranslateProvider,
  LanguageSelector,
  useGoogleTranslate,
  LanguageOption,
  GoogleTranslateContextType,
} from "react-custom-google-translate";

// Type for language options
const customLanguages: LanguageOption[] = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
];

// Type for context
const MyComponent: React.FC = () => {
  const context: GoogleTranslateContextType = useGoogleTranslate();
  return <div>{context.currentLanguage}</div>;
};

Common Issues & Solutions

1. Google Translate Not Loading

Make sure you're using the provider correctly and the scripts are loaded:

// Check if Google Translate is ready
const { isReady } = useGoogleTranslate();

if (!isReady) {
  return <div>Loading translation service...</div>;
}

2. Multiple Language Selectors

You can use multiple language selectors on the same page - they'll sync automatically:

<header>
  <LanguageSelector />
</header>
<footer>
  <LanguageSelector />
</footer>

3. Language Not Changing

Make sure the language code is correct and supported by Google Translate:

// Correct format: "source|target"
changeLanguage("en|es"); // ✅ Correct
changeLanguage("es"); // ❌ Incorrect

4. Styling Issues

The package automatically injects CSS, but you can override it:

/* Custom styles */
.my-language-selector {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 8px 16px;
}

.my-language-selector button {
  border: none;
  background: transparent;
  font-weight: 500;
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Google Translate for providing the translation service
• Next.js team for the amazing framework
• React team for the excellent library

Changelog

v1.0.0

• Initial release
• Google Translate integration
• Custom language selector
• TypeScript support
• Persistent language selection
• Hidden Google branding
• Automatic CSS injection
• Support for 100+ languages

### 2. Use the LanguageSelector component

```tsx
// components/Header.tsx
import { LanguageSelector } from 'next-google-translate';

export default function Header() {
  return (
    <header>
      <nav>
        <LanguageSelector />
      </nav>
    </header>
  );
}

3. Use the hook for custom implementations

// components/CustomLanguageSelector.tsx
import { useGoogleTranslate } from "next-google-translate";

export default function CustomLanguageSelector() {
  const { isReady, currentLanguage, changeLanguage, availableLanguages } =
    useGoogleTranslate();

  if (!isReady) return <div>Loading...</div>;

  return (
    <select
      value={`en|${currentLanguage}`}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {availableLanguages.map((lang) => (
        <option key={lang.value} value={lang.value}>
          {lang.label}
        </option>
      ))}
    </select>
  );
}

API Reference

GoogleTranslateProvider

Props

| Prop | Type | Default | Description | | -------------------- | ------------------ | ------------------ | -------------------------------- | | pageLanguage | string | 'en' | The source language of your page | | availableLanguages | LanguageOption[] | defaultLanguages | Array of available languages | | children | ReactNode | - | Child components |

Default Languages

const defaultLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|bn", label: "বাংলা" },
  { value: "en|gu", label: "ગુજરાતી" },
  { value: "en|hi", label: "हिंदी" },
  { value: "en|kn", label: "ಕನ್ನಡ" },
  { value: "en|ml", label: "മലയാളം" },
  { value: "en|mr", label: "मराठी" },
  { value: "en|or", label: "ଓଡିଆ" },
  { value: "en|pa", label: "ਪੰਜਾਬੀ" },
  { value: "en|sd", label: "سنڌي" },
  { value: "en|ta", label: "தமிழ்" },
  { value: "en|te", label: "తెలుగు" },
  { value: "en|ur", label: "اردو" },
];

LanguageSelector

Props

| Prop | Type | Default | Description | | ------------------------- | ---------------------------- | ------------------- | ---------------------------------- | | className | string | '' | CSS class for the container | | buttonClassName | string | '' | CSS class for the button | | dropdownClassName | string | '' | CSS class for the dropdown | | optionClassName | string | '' | CSS class for each option | | selectedOptionClassName | string | '' | CSS class for selected option | | showCheckmark | boolean | true | Show checkmark for selected option | | placeholder | string | 'Switch Language' | Placeholder text | | arrowIcon | ReactNode | defaultArrowIcon | Custom arrow icon | | checkIcon | ReactNode | defaultCheckIcon | Custom check icon | | persistSelection | boolean | true | Persist selection in localStorage | | onLanguageChange | (language: string) => void | - | Callback when language changes |

useGoogleTranslate Hook

Returns an object with:

| Property | Type | Description | | -------------------- | ---------------------------- | --------------------------------- | | isReady | boolean | Whether Google Translate is ready | | currentLanguage | string | Current selected language code | | changeLanguage | (langCode: string) => void | Function to change language | | availableLanguages | LanguageOption[] | Array of available languages |

Styling

The package includes default CSS that hides Google Translate's UI elements. You can override these styles or add your own:

/* Custom styles */
.my-language-selector {
  background: #f0f0f0;
  border-radius: 8px;
  padding: 8px 16px;
}

.my-language-selector button {
  border: none;
  background: transparent;
  font-weight: 500;
}

.my-language-selector .dropdown {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

Custom Languages

You can provide your own language list:

const customLanguages = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
  { value: "en|fr", label: "Français" },
  { value: "en|de", label: "Deutsch" },
];

<GoogleTranslateProvider availableLanguages={customLanguages}>
  {children}
</GoogleTranslateProvider>;

Advanced Usage

With Custom Styling

<LanguageSelector
  className="my-language-selector"
  buttonClassName="px-4 py-2 bg-blue-500 text-white rounded"
  dropdownClassName="bg-white shadow-lg border rounded"
  optionClassName="px-4 py-2 hover:bg-gray-100"
  selectedOptionClassName="bg-blue-50 text-blue-600"
  placeholder="Select Language"
  onLanguageChange={(lang) => console.log("Language changed to:", lang)}
/>

With Custom Icons

<LanguageSelector
  arrowIcon={<ChevronDownIcon />}
  checkIcon={<CheckIcon />}
  showCheckmark={true}
/>

Programmatic Language Change

function MyComponent() {
  const { changeLanguage } = useGoogleTranslate();

  const handleLanguageChange = (langCode: string) => {
    changeLanguage(langCode);
    // Additional logic here
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange("en|es")}>
        Switch to Spanish
      </button>
      <button onClick={() => handleLanguageChange("en|fr")}>
        Switch to French
      </button>
    </div>
  );
}

Without Persistent Storage

<LanguageSelector
  persistSelection={false}
  onLanguageChange={(lang) => {
    // Handle language change in your own way
    console.log("Language changed to:", lang);
  }}
/>

Custom Hook Usage

function LanguageStatus() {
  const { isReady, currentLanguage, availableLanguages } = useGoogleTranslate();

  if (!isReady) {
    return <div>Loading translation service...</div>;
  }

  const currentLangLabel = availableLanguages.find(
    (lang) => lang.value === `en|${currentLanguage}`
  )?.label;

  return (
    <div>
      <p>Current language: {currentLangLabel}</p>
      <p>Available languages: {availableLanguages.length}</p>
    </div>
  );
}

TypeScript Support

The package includes full TypeScript support with type definitions:

import {
  GoogleTranslateProvider,
  LanguageSelector,
  useGoogleTranslate,
  LanguageOption,
  GoogleTranslateContextType,
} from "next-google-translate";

// Type for language options
const customLanguages: LanguageOption[] = [
  { value: "en|en", label: "English" },
  { value: "en|es", label: "Español" },
];

// Type for context
const MyComponent: React.FC = () => {
  const context: GoogleTranslateContextType = useGoogleTranslate();
  return <div>{context.currentLanguage}</div>;
};

Common Issues & Solutions

1. Google Translate Not Loading

Make sure you're using the provider correctly and the scripts are loaded:

// Check if Google Translate is ready
const { isReady } = useGoogleTranslate();

if (!isReady) {
  return <div>Loading translation service...</div>;
}

2. Styles Not Applied

Import the CSS file in your main layout:

import "next-google-translate/dist/styles.css";

3. localStorage Issues

If you're using SSR, wrap localStorage usage in a useEffect:

useEffect(() => {
  // localStorage operations here
}, []);

4. Multiple Language Selectors

You can use multiple language selectors on the same page - they'll sync automatically:

<header>
  <LanguageSelector />
</header>
<footer>
  <LanguageSelector />
</footer>

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Google Translate for providing the translation service
• Next.js team for the amazing framework
• React team for the excellent library

Changelog

v1.0.11

• Initial release
• Google Translate integration
• Custom language selector
• TypeScript support
• Persistent language selection
• Hidden Google branding