i18n-lazy

Effortlessly automate your translation process and expand your reach globally. With i18n-lazy, going global has never been easier. Just sit back, relax, and let your translations happen lazily.

Features

• 🚀 Automated translations using Google's Gemini AI
• 🔄 Easy integration with React applications
• 📦 TypeScript support
• 🛠️ Simple configuration
• 💻 CLI tool for managing translations
• 🔍 Automatic scanning of translation keys
• 🌐 Support for multiple locales

Installation

npm install i18n-lazy
# or
yarn add i18n-lazy

Quick Start

1. Initialize configuration:

npx i18n-lazy-init

2. Update the generated i18n-lazy.config.js with your settings:

export default {
  supportedLocales: [
    { code: "en", name: "English" },
    { code: "es", name: "Spanish" },
    // Add more languages as needed
  ],
  pathToLocales: "./src/locales", // Where translation files will be stored
  parseFolder: ["./src"], // Folders to scan for translations
  geminiApiKey: "YOUR_API_KEY", // Your Gemini API key
};

3. Create translation files in the ./src/locales directory, and create a new json file for each language. For example, ./src/locales/en.json and ./src/locales/es.json.

and place empty translation objects in the files.

{
  //empty
}

4. Wrap your app with the TranslationProvider:

import { LazyI18nProvider, LanguageCodeToTranslations } from "i18n-lazy";
import translations from "./locales/en.json";
import en from "./locales/en.json";
import es from "./locales/es.json";

export const translations: LanguageCodeToTranslations = {
  en: en,
  es: es,
};

function App() {
  return (
    <LazyI18nProvider localeCode="en" translationsObject={translations["en"]}>
      <YourApp />
    </LazyI18nProvider>
  );
}

5. Use translations in your components:

import { useLazyI18n } from "i18n-lazy";

function MyComponent() {
  const { translate } = useLazyI18n();

  return (
    <div>
      <h1>
        {translate(
          "Was just interested in trying out the npm package that i have built"
        )}
      </h1>
      <h1>{translate("My name is {name}", { name: "John" })}</h1>
    </div>
  );
}

6. Generate translations:

npx i18n-lazy

API Reference

TranslationProvider

The main provider component that wraps your application.

<TranslationProvider
  localeCode="en"              // Current locale code
  defaultLocaleCode="en"       // Optional fallback locale
  translationsObject={...}     // Translation key-value pairs
>
  {children}
</TranslationProvider>

useTranslation Hook

const {
  translate, // Function to translate keys
  locale, // Current locale code
  setLocale, // Function to change locale
  translations, // Current translations object
  setTranslations, // Function to update translations
} = useTranslation();

translate Function

// Basic usage
translate("key");

// With interpolation
translate("My name is {name}", { name: "John" });

Configuration Options

| Option | Type | Description | | ---------------- | ------ | ---------------------------------------------- | | supportedLocales | Array | List of supported languages with code and name | | pathToLocales | String | Directory path for translation files | | parseFolder | Array | List of folders to scan for translation keys | | geminiApiKey | String | Your Gemini API key for translations |

Environment Variables

Create a .env file in your project root:

GEMINI_API_KEY=your_api_key_here

CLI Commands

• npx i18n-lazy-init: Creates initial configuration file
• npx i18n-lazy: Scans for translation keys and generates translations

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and feature requests, please create an issue.