@geenius/i18n

Internationalization for Convex apps with React and SolidJS support.

Features

14 built-in locales with metadata (name, native name, direction, flag)
RTL detection for Arabic and Hebrew
Pluralization with _zero, _one, _other suffixes
{{variable}} interpolation
Intl-based date, number, and currency formatting
localStorage locale persistence and browser detection
Convex backend schema for translation management
Admin dashboard components (Tailwind and vanilla CSS variants)

Packages

Package	Description
`@geenius/i18n-shared`	Core types, utilities, locale data
`@geenius/i18n-convex`	Convex schema and query/mutation factories
`@geenius/i18n-react`	React hooks, components, admin pages (Tailwind)
`@geenius/i18n-solidjs`	SolidJS primitives, components, admin pages
`@geenius/i18n-react-css`	React components (vanilla CSS)
`@geenius/i18n-solidjs-css`	SolidJS components (vanilla CSS)

Quick Start

React

import { I18nProvider, useI18n } from '@geenius/i18n/react'

const translations = {
  greeting: 'Hello {{name}}!',
  items_zero: 'No items',
  items_one: '1 item',
  items_other: '{{count}} items',
}

function App() {
  return (
    <I18nProvider
      config={{ defaultLocale: 'en', supportedLocales: ['en', 'es', 'fr'], persistLocale: true, detectBrowser: true }}
      translations={translations}
    >
      <Dashboard />
    </I18nProvider>
  )
}

function Dashboard() {
  const { t, locale, setLocale, formatDate, formatCurrency, isRTL } = useI18n()

  return (
    <div dir={isRTL ? 'rtl' : 'ltr'}>
      <h1>{t('greeting', { name: 'Mehdi' })}</h1>
      <p>{formatDate(new Date())}</p>
      <p>{formatCurrency(49.99, 'USD')}</p>
      <button onClick={() => setLocale('es')}>Switch to Spanish</button>
    </div>
  )
}

SolidJS

import { I18nProvider, createI18n } from '@geenius/i18n/solidjs'

function Dashboard() {
  const { t, locale, setLocale } = createI18n()
  return <h1>{t('greeting', { name: 'Mehdi' })}</h1>
}

Core Utilities

import { interpolate, t, plural, isRTL, formatDate, formatNumber, formatCurrency, detectLocale } from '@geenius/i18n/shared'

interpolate('Hello {{name}}!', { name: 'Alice' })  // "Hello Alice!"
isRTL('ar')  // true
formatCurrency(42.99, 'EUR', 'de')  // "42,99 €"

Convex Backend

import { schema, createI18nQueries, createI18nMutations } from '@geenius/i18n/convex'
import { query, mutation } from './_generated/server'

// Wire into your Convex project
const { listTranslations, searchTranslations } = createI18nQueries(query)
const { upsertTranslation, importTranslations } = createI18nMutations(mutation)

export { listTranslations, searchTranslations, upsertTranslation, importTranslations }

Config Builder

import { createI18nConfig, i18nPresets } from '@geenius/i18n/shared'

// Builder pattern
const config = createI18nConfig()
  .withDefaultLocale('en')
  .withSupportedLocales(['en', 'fr', 'de', 'es'])
  .withFallbackLocale('en')
  .withDebug(true)
  .build()

// Or use presets
const simple = i18nPresets.simple('en')
const multi = i18nPresets.multi()
const global = i18nPresets.global()
const dev = i18nPresets.development()

Supported Locales

English, French, German, Spanish, Portuguese, Italian, Dutch, Russian, Chinese, Japanese, Korean, Arabic (RTL), Hebrew (RTL), Turkish

Development

pnpm install
pnpm build    # Build all packages
pnpm test     # Run tests

License

MIT