i18n Patterns

LivestockAI supports multiple languages using i18next.

Configuration

The i18n config is in

app/lib/i18n/

:

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
})

Using Translations

import { useTranslation } from 'react-i18next'

function MyComponent() {
  const { t } = useTranslation()

  return (
    <div>
      <h1>{t('dashboard.title')}</h1>
      <p>{t('dashboard.welcome', { name: user.name })}</p>
    </div>
  )
}

Supported Languages

Code	Language	Status
en	English	Complete
fr	French	Complete
es	Spanish	Complete
pt	Portuguese	Complete
sw	Swahili	Complete
ha	Hausa	In progress
ar	Arabic	Planned

Translation Files

Translations are in

app/lib/i18n/locales/

:

locales/
├── en.json
├── fr.json
├── es.json
├── pt.json
├── sw.json
└── ha.json

Key Namespaces

{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete"
  },
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Welcome, {{name}}"
  },
  "batches": {
    "title": "Batches",
    "create": "Create Batch"
  }
}

Pluralization

// Translation file
{
  "birds": "{{count}} bird",
  "birds_plural": "{{count}} birds"
}

// Usage
t('birds', { count: 1 })  // "1 bird"
t('birds', { count: 5 })  // "5 birds"

Date/Number Formatting

Use user settings for locale-aware formatting:

import { useFormatDate, useFormatNumber } from '~/features/settings'

function MyComponent() {
  const formatDate = useFormatDate()
  const formatNumber = useFormatNumber()

  return (
    <div>
      <span>{formatDate(new Date())}</span>
      <span>{formatNumber(1234.56)}</span>
    </div>
  )
}

Related Skills

• multi-currency

  - Currency formatting

• rugged-utility

  - UI design principles