next-google-translate-faith

v1.0.3

Published

7 months ago

A Next.js Google Translate component with custom language selector and hidden Google branding

Downloads

0High
0Medium
0Low

haneen10

nextjs google-translate react typescript translation i18n

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

npm install next-google-translate

yarn add next-google-translate

Quick Start

1. Wrap your app with the GoogleTranslateProvider

// app/layout.tsx or pages/_app.tsx
import { GoogleTranslateProvider } from 'next-google-translate';
import 'next-google-translate/dist/styles.css';

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 '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

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Next.js Google Translate Package

Features

Installation

Quick Start

1. Wrap your app with the GoogleTranslateProvider

2. Use the LanguageSelector component

3. Use the hook for custom implementations

API Reference

GoogleTranslateProvider

Props

Default Languages

LanguageSelector

Props

useGoogleTranslate Hook

Styling

Custom Languages

Advanced Usage

With Custom Styling

With Custom Icons

Programmatic Language Change

Without Persistent Storage

Custom Hook Usage

TypeScript Support

Common Issues & Solutions

1. Google Translate Not Loading

2. Styles Not Applied

3. localStorage Issues

4. Multiple Language Selectors

Browser Support

Contributing

License

Acknowledgments

Changelog

v1.0.0