Atozas Language Translator

A React component for easy Google Translate integration that translates the entire page content when users select a language from the dropdown.

Features

• 🔧 Easy to integrate Google Translate widget
• 🌍 Translates entire page content automatically
• 🌐 Shows ALL languages by default (100+ languages)
• 🎨 Customizable styling and positioning
• 📱 Responsive design for mobile devices
• 🚫 Automatically hides Google Translate banner
• ⚡ TypeScript support
• 🔄 Callback support for translation events
• 🎯 Multiple positioning options
• 🔗 Configurable script URL and Google Translate options

Installation

npm install atozas-language-translator

Usage

1. Import the CSS

You must import the provided CSS file for proper styling and hiding of Google Translate's banner:

import "atozas-language-translator/dist/Translate.css";

2. Use the Component

Basic Usage with A-Z Alphabet Selector

import React from "react";
import { Translate } from "atozas-language-translator";
import "atozas-language-translator/dist/Translate.css";

function App() {
  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <p>This content will be translated when users select a language.</p>

      {/* This shows an A-Z alphabet selector with Google Translate integration */}
      <Translate />
    </div>
  );
}

Using LanguageSelector Only (No Google Translate)

import React from "react";
import { LanguageSelector } from "atozas-language-translator";
import "atozas-language-translator/dist/Translate.css";

function App() {
  const handleLanguageSelect = (language) => {
    console.log("Selected language:", language);
    // Handle language selection without Google Translate
  };

  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <p>This content will be translated when users select a language.</p>

      {/* This shows only the A-Z alphabet selector */}
      <LanguageSelector onLanguageSelect={handleLanguageSelect} />
    </div>
  );
}

Advanced Usage with Custom Configuration

import React from "react";
import { Translate } from "atozas-language-translator";
import "atozas-language-translator/dist/Translate.css";

function App() {
  const handleTranslate = (language: string) => {
    console.log("Language changed to:", language);
    // You can add custom logic here when language changes
  };

  return (
    <div>
      <h1>My Website</h1>
      <p>This content can be translated using the widget.</p>

      <Translate
        pageLanguage="en"
        position="top-right"
        onTranslate={handleTranslate}
        translateEntirePage={true}
        scriptUrl="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        includedLanguages="" // Empty string = ALL languages (default)
        autoDisplay={false}
        gaTrack={false}
        style={{
          backgroundColor: "#f0f0f0",
          borderRadius: "12px",
          padding: "8px",
        }}
      />
    </div>
  );
}

Custom Script URL Example

<Translate
  scriptUrl="https://your-custom-domain.com/translate-script.js"
  pageLanguage="en"
  translateEntirePage={true}
/>

Props

Translate Component Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------ | ----------- | ------------------------------------ | | onLanguageSelect | (language: Language) => void | undefined | Callback when a language is selected | | selectedLanguage | string | '' | Currently selected language code | | className | string | '' | CSS class name for styling | | style | React.CSSProperties | {} | Inline styles for the widget |

LanguageSelector Component Props

| Prop | Type | Default | Description | | ------------------ | ------------------------------ | ------------------ | ------------------------------------ | | languages | Language[] | defaultLanguages | Array of available languages | | onLanguageSelect | (language: Language) => void | undefined | Callback when a language is selected | | selectedLanguage | string | '' | Currently selected language code | | className | string | '' | CSS class name for styling | | style | React.CSSProperties | {} | Inline styles for the widget |

Language Options

Default Behavior (All Languages)

By default, the component shows ALL available languages (100+ languages):

// Shows ALL languages (default behavior)
<Translate includedLanguages="" />

// Or simply don't specify the prop
<Translate />

Optional: Limit to Specific Languages

You can optionally limit which languages appear in the dropdown:

// Show only specific languages
<Translate includedLanguages="en,es,fr,de,hi,kn,zh-CN,ja" />

Common language codes:

• en - English
• es - Spanish
• fr - French
• de - German
• hi - Hindi
• kn - Kannada
• zh-CN - Chinese (Simplified)
• ja - Japanese
• ko - Korean
• ar - Arabic

Positioning Options

• top-right (default): Widget appears in the top-right corner
• top-left: Widget appears in the top-left corner
• bottom-right: Widget appears in the bottom-right corner
• bottom-left: Widget appears in the bottom-left corner
• center: Widget appears in the center of the screen

How It Works

1. Dropdown Selection: Users see a language dropdown with ALL available languages (100+ languages)
2. Page Translation: When a language is selected, Google Translate automatically translates all text content on the page
3. Real-time: The translation happens instantly without page reload
4. Persistent: The translation persists as users navigate through your site

Styling

The component includes a CSS file that:

• Hides Google Translate's banner and unwanted elements
• Provides responsive design for mobile devices
• Resets body positioning issues caused by Google Translate
• Offers customizable styling through props

Custom Styling

<Translate
  style={{
    backgroundColor: "#ffffff",
    border: "2px solid #007bff",
    borderRadius: "8px",
    padding: "10px",
    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
  }}
/>

Requirements

• React 16.8.0 or higher
• React Router DOM 5.0.0 or higher (for useLocation hook)

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

MIT

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

Issues

If you encounter any issues, please open an issue on GitHub.