🧠 LexiMind i18n

The Best Multilingual Translation Engine for React

Make your React apps speak every language — with smart caching, advanced utilities, and unmatched performance.

📚 Documentation • 🚀 Quick Start • 💡 Examples • 🐛 Report Bug

✨ Features

⚡ Lightning Fast

Smart caching system for offline support and instant translations.

🔍 Intelligent Detection

Auto-detects language from URL, localStorage, browser, and HTML tags.

🪶 Lightweight & Powerful

Small bundle size with enterprise-grade features.

🎨 Advanced Formatting

Built-in date, number, and currency formatting with Intl API.

🌐 Dynamic Loading

Lazy load translations on demand with preloading support.

🎯 Developer-Friendly

Context Provider, utilities, performance monitoring, and TypeScript ready.

🚀 Production Ready

Translation validation, error handling, and performance insights.

🔧 Highly Extensible

Rich utilities for pluralization, gender, markdown, and context.

🚀 Quick Start

Installation

npm install leximind-i18n i18next react-i18next

Basic Usage

import { initLexiMind, useLexiMind } from 'leximind-i18n'

// Initialize once in your app entry point
await initLexiMind({
  resources: {
    en: { translation: { welcome: 'Welcome', hello: 'Hello, {{name}}!' } },
    es: { translation: { welcome: 'Bienvenido', hello: '¡Hola, {{name}}!' } },
    fr: { translation: { welcome: 'Bienvenue', hello: 'Bonjour, {{name}}!' } }
  },
  fallbackLng: 'en'
})

// Use in any component
function App() {
  const { language, setLanguage, t } = useLexiMind()
  
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('hello', { name: 'World' })}</p>
      
      <button onClick={() => setLanguage('en')}>🇺🇸 English</button>
      <button onClick={() => setLanguage('es')}>🇪🇸 Español</button>
      <button onClick={() => setLanguage('fr')}>🇫🇷 Français</button>
    </div>
  )
}

That's it! 🎉 Your app is now multilingual.

📖 Core API

initLexiMind(options)

Initialize the translation engine with advanced caching and detection.

await initLexiMind({
  resources: { /* your translations */ },
  fallbackLng: 'en',
  cache: true,              // Enable smart caching (default: true)
  cacheVersion: '1.0.0',    // Cache version for invalidation
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
  },
  onLanguageChange: (lng) => {
    console.log('Language changed to:', lng)
  }
})

useLexiMind() Hook

React hook for component-level translations.

const { 
  language,      // Current language code
  setLanguage,   // Change language function
  t,             // Translation function
  ready,         // Initialization status
  i18n          // i18next instance
} = useLexiMind()

LexiMindProvider - Context Provider

Wrap your app for global translation access.

import { LexiMindProvider } from 'leximind-i18n/provider'

<LexiMindProvider onLanguageChange={(lng) => console.log(lng)}>
  <App />
</LexiMindProvider>

Advanced Utilities

import { 
  getLanguage,          // Get current language
  getAllLanguages,      // Get all loaded languages
  clearCache,           // Clear translation cache
  formatDate,           // Format dates with i18n
  formatNumber,         // Format numbers
  formatCurrency,       // Format currency
  preloadLanguages,     // Preload languages
  exists,               // Check if key exists
  getSafe               // Get translation with fallback
} from 'leximind-i18n'

// Format dates
formatDate(new Date(), 'fr') // "15 janv. 2025"

// Format currency
formatCurrency(99.99, 'EUR', 'de') // "99,99 €"

// Preload languages for better UX
await preloadLanguages(['es', 'fr', 'de'])

Translation Utilities

import {
  pluralize,              // Smart pluralization
  translateWithContext,   // Context-aware translations
  translateWithGender,    // Gender-specific translations
  batchTranslate,        // Batch multiple translations
  validateTranslations,  // Validate translation coverage
  translateMarkdown      // Markdown support
} from 'leximind-i18n/utils'

// Pluralization
pluralize('item', 5) // Uses count for plural forms

// Context-aware (formal/informal)
translateWithContext('greeting', 'formal')

// Validate coverage
const result = validateTranslations(['key1', 'key2'])
console.log(result.coverage) // "100%"

Performance Monitoring

import { 
  getPerformanceInsights,
  logPerformanceReport 
} from 'leximind-i18n/performance'

// Get metrics
const metrics = getPerformanceInsights()
console.log(metrics.cacheHitRate) // "95.3%"

// Log full report (dev only)
logPerformanceReport()

💡 Advanced Examples

await initLexiMind({
  backend: {
    loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
    crossDomain: true
  },
  fallbackLng: 'en'
})

{
  "item": "{{count}} item",
  "item_plural": "{{count}} items",
  "item_zero": "No items"
}

t('item', { count: 0 })  // "No items"
t('item', { count: 1 })  // "1 item"
t('item', { count: 5 })  // "5 items"

{
  "user": {
    "profile": {
      "title": "User Profile",
      "edit": "Edit Profile"
    }
  }
}

t('user.profile.title')  // "User Profile"

const languages = [
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'fr', name: 'Français', flag: '🇫🇷' }
]

function LanguageSwitcher() {
  const { language, setLanguage } = useLexiMind()
  
  return (
    <select value={language} onChange={(e) => setLanguage(e.target.value)}>
      {languages.map(lang => (
        <option key={lang.code} value={lang.code}>
          {lang.flag} {lang.name}
        </option>
      ))}
    </select>
  )
}

📚 View all examples →

📦 What's Included

• ✅ Automatic language detection (browser + localStorage)
• ✅ Instant language switching (no page reload)
• ✅ Local and remote translation loading
• ✅ React hooks API (useLexiMind)
• ✅ Global translation helper (t())
• ✅ Nested translation keys
• ✅ Variable interpolation (Hello, {{name}})
• ✅ Pluralization support
• ✅ Namespace support
• ✅ Missing key warnings
• ✅ localStorage persistence
• ✅ TypeScript support (coming soon)

🛠️ Built With

LexiMind is a lightweight wrapper around these battle-tested libraries:

• i18next — The core i18n framework
• react-i18next — React bindings
• i18next-browser-languagedetector — Auto language detection
• i18next-http-backend — Load translations from server/CDN

📚 Documentation

• Full Documentation — Complete guide
• API Reference — All methods and options
• Examples — Real-world use cases
• GitHub Repository — Source code

🤝 Contributing

Contributions are welcome! Feel free to:

• 🐛 Report bugs
• 💡 Suggest features
• 📖 Improve documentation
• 🔧 Submit pull requests

📄 License

MIT © Rohan Singh

💬 Support

• 📧 Email: [email protected]
• 🐛 Issues
• 💬 Discussions

Made with ❤️ for the React community

If you find this useful, please ⭐ star the repo!