SupaStart
Getting Started

Internationalization (i18n)

Learn how to use internationalization in Supastart.

Overview

Supastart includes built-in internationalization (i18n) that enables your application to support multiple languages, RTL layouts, and locale-specific formatting.

Implementation

Supastart's i18n system consists of:

  1. i18next Integration - For translations
  2. Language Provider - For state management
  3. Formatting Utilities - For dates, times, and currencies
  4. Translation Files - JSON-based locale files
  5. RTL Support - For right-to-left languages

Configuration

Core Setup

The i18n configuration is in src/app/i18n.ts:

// src/app/i18n.ts
import arTranslation from '@/i18n/messages/ar.json';
import chTranslation from '@/i18n/messages/ch.json';
import deTranslation from '@/i18n/messages/de.json';
import enTranslation from '@/i18n/messages/en.json';
import esTranslation from '@/i18n/messages/es.json';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
 
i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslation },
    ar: { translation: arTranslation },
    de: { translation: deTranslation },
    es: { translation: esTranslation },
    ch: { translation: chTranslation },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});
 
export default i18n;

Language Settings

Languages are defined in src/i18n/config.ts:

// src/i18n/config.ts
export const languages: Language[] = [
  {
    code: 'en',
    name: 'English',
    shortName: 'EN',
    direction: 'ltr',
    flag: '/media/flags/united-states.svg',
  },
  {
    code: 'ar',
    name: 'Arabic',
    shortName: 'AR',
    direction: 'rtl',
    flag: '/media/flags/saudi-arabia.svg',
  },
  // Other languages...
];

Translation Files

Translation strings are stored as JSON files in src/i18n/messages/:

// src/i18n/messages/en.json (simplified)
{
  "common": {
    "messages": {
      "unauthorized": "Unauthorized access.",
      "system_error": "Oops! Something didn't go as planned."
    },
    "logout": "Logout"
  },
  "login": {
    "title": "Login",
    "email": "Email",
    "password": "Password"
  }
}

Usage in Components

Translation Hook

Use the useTranslation hook to access translations:

import { useTranslation } from 'react-i18next';
 
function MyComponent() {
  const { t } = useTranslation();
 
  return (
    <div>
      <h1>{t('login.title')}</h1>
      <p>{t('common.messages.system_error')}</p>
    </div>
  );
}

Language Switching

Use the useLanguage hook to change languages:

import { useLanguage } from '@/providers';
 
function LanguageSwitcher() {
  const { language, changeLanguage } = useLanguage();
 
  return (
    <select
      value={language.code}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {languages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.name}
        </option>
      ))}
    </select>
  );
}

RTL Support

For right-to-left languages like Arabic:

  1. Direction is set automatically when language changes
  2. Use Tailwind's RTL variants for direction-specific styling:
// Flip icons in RTL mode
<ChevronRight className="rtl:rotate-180" />
 
// Adjust text alignment
<th className="text-left rtl:text-right" />

Formatting Utilities

Supastart provides formatting functions in src/i18n/format.ts:

// Date formatting (output: "Dec 7, 2023")
formatDate(new Date());
 
// Date and time (output: "Dec 7, 2023, 11:41 PM")
formatDateTime(new Date());
 
// Time only (output: "11:41 PM")
formatTime(new Date());
 
// Currency (output: "$1,234.56")
formatMoney(1234.56, 'USD');

Implementation

Language Provider

The I18nProvider manages language state and persists preferences:

// From src/providers/i18n-provider.tsx
function LanguageSwitcherExample() {
  const { language, changeLanguage } = useLanguage();
 
  return (
    <div>
      <p>Current: {language.name}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ar')}>Arabic (RTL)</button>
    </div>
  );
}

Direction Provider

The DirectionProvider integrates with Radix UI for RTL support:

// src/providers/direction-provider.tsx
const DirectionProvider = ({ children }) => {
  const { language } = useLanguage();
  return (
    <RadixDirectionProvider dir={language.direction}>
      {children}
    </RadixDirectionProvider>
  );
};
PreviousDeploymentNextRouting