Skip to main content

​
Overview

The Language API provides functions for managing language settings and translating UI text between Turkish and Arabic. Source: src/config/language.js

​
Functions

​
toggleLanguage()

Toggles between Turkish and Arabic languages. 
import { toggleLanguage } from '@/config/language';

const LanguageSwitch = () => {
  const handleToggle = () => {
    const newLang = toggleLanguage();
    console.log(`Switched to: ${newLang}`);
    // Re-render components to show new language
    window.location.reload();
  };
  
  return <button onClick={handleToggle}>Toggle Language</button>;
};
​
returns
string
The new language code after toggling ('tr' or 'ar')
​
Behavior
  • Toggles between 'tr' (Turkish) and 'ar' (Arabic)
  • Saves selected language to localStorage with key 'suapp-language'
  • Returns the new language code
  • Side effect: Updates internal currentLanguage variable

​
getCurrentLanguage()

Gets the current active language code. 
import { getCurrentLanguage } from '@/config/language';

const lang = getCurrentLanguage();
console.log(lang); // "tr" or "ar"
​
returns
string
Current language code ('tr' or 'ar')
​
Behavior
  • Checks localStorage for saved language preference
  • Falls back to DEFAULT_LANGUAGE ('tr') if no saved preference
  • Validates saved language exists in LANGUAGES object
  • Caches result in internal currentLanguage variable

​
getCurrentLanguageInfo()

Gets complete information about the current language. 
import { getCurrentLanguageInfo } from '@/config/language';

const langInfo = getCurrentLanguageInfo();
console.log(langInfo.name); // "Türkçe"
console.log(langInfo.flag); // "🇹🇷"
​
returns
object
Language information object

​
t()

Translates a key to the current language with optional parameter substitution. 
import { t } from '@/config/language';

// Simple translation
const orderText = t('orderButton');
console.log(orderText); // "Sipariş Ver" (TR) or "اطلب" (AR)

// With parameters
const minOrderText = t('minimumOrder', { minimumAmount: 400 });
console.log(minOrderText); // "Minimum sepet tutarı 400 TL'dir"
​
key
string
required
Translation key to look up
​
params
object
Object with parameter values for placeholder replacement
​
returns
string
Translated string with parameters replaced, or the key itself if translation not found
​
Parameter Substitution
Replaces placeholders in format {paramName} with values from params object:
t('minimumOrder', { minimumAmount: 400 })
// Template: "Minimum sepet tutarı {minimumAmount} TL'dir"
// Result: "Minimum sepet tutarı 400 TL'dir"
Multiple parameters:
t('currentCart', { amount: 350 })
// Result: "Şu anki sepet: 350 TL"
​
Fallback Behavior
If translation key not found:
  1. Tries current language
  2. Falls back to default language (Turkish)
  3. Returns the key itself if still not found

​
Configuration

​
LANGUAGES

Language configuration object containing all translations. 
import { LANGUAGES } from '@/config/language';

console.log(LANGUAGES.tr.name); // "Türkçe"
console.log(LANGUAGES.ar.flag); // "🇸🇦"

​
DEFAULT_LANGUAGE

Default language code. 
import { DEFAULT_LANGUAGE } from '@/config/language';

console.log(DEFAULT_LANGUAGE); // "tr"
​
value
string
default:"tr"
Default language is Turkish

​
Translation Keys

All available translation keys:
KeyTurkish (TR)Arabic (AR)
seeOptionsSeçenekleri Görünانظر الخيارات
addToCartSepete Ekleأضف إلى السلة
productDescriptionÜrün seçeneklerini inceleyin ve sipariş verin.تعرف على خيارات المنتج واطلبه.
clickToOrderÜrüne tıklayarak WhatsApp ile sipariş verebilirsinizيمكنكم الطلب عبر الواتساب بالضغط على المنتج.
damacanaRestrictedDamacana siparişleri ‘dan sonra alınmamaktadırلا يتم قبول طلبات Demijohn بعد
orderButtonSipariş Verاطلب
orderUnavailableServis Saatleri Dışındadırخارج ساعات الخدمة
minimumOrderMinimum sepet tutarı TL’dirالحد الأدنى للسلة ليرة تركية
currentCartŞu anki sepet: TLالسلة الحالية: ليرة تركية
welcomeMessageLütfen ilk siparişinizde adresinizi eklemeyi unutmayın, Teşekkürler.يرجى عدم نسيان إضافة عنوانكم في طلبكم الأول، شكراً.
understoodAnladımفهمت
scrollDownKaydırتمرر

​
Usage Examples

​
Language Switcher Component

import { useState, useEffect } from 'react';
import { 
  toggleLanguage, 
  getCurrentLanguageInfo 
} from '@/config/language';

const LanguageSwitcher = () => {
  const [langInfo, setLangInfo] = useState(getCurrentLanguageInfo());
  
  const handleToggle = () => {
    toggleLanguage();
    setLangInfo(getCurrentLanguageInfo());
  };
  
  return (
    <button onClick={handleToggle}>
      {langInfo.flag} {langInfo.name}
    </button>
  );
};

​
Translated UI Components

import { t } from '@/config/language';

const ProductCard = ({ product }) => (
  <div>
    <h3>{product.name}</h3>
    <p>{t('productDescription')}</p>
    <button>{t('addToCart')}</button>
  </div>
);

​
Dynamic Messages with Parameters

import { t } from '@/config/language';
import { ORDER_LIMITS } from '@/config/orderLimits';
import { useCart } from '@/context/CartContext';

const MinimumOrderWarning = () => {
  const { getTotalPrice } = useCart();
  const totalPrice = getTotalPrice();
  const minAmount = ORDER_LIMITS.minimumOrderAmount;
  
  if (totalPrice >= minAmount) return null;
  
  return (
    <div className="warning">
      <p>{t('minimumOrder', { minimumAmount: minAmount })}</p>
      <p>{t('currentCart', { amount: totalPrice.toFixed(2) })}</p>
    </div>
  );
};

​
Service Hours Message

import { t } from '@/config/language';
import { isServiceOpen } from '@/config/serviceHours';

const OrderButton = () => {
  const [canOrder, setCanOrder] = useState(false);
  
  useEffect(() => {
    isServiceOpen().then(setCanOrder);
  }, []);
  
  return (
    <button disabled={!canOrder}>
      {canOrder ? t('orderButton') : t('orderUnavailable')}
    </button>
  );
};

​
Damacana Time Restriction

import { t } from '@/config/language';
import { DAMACANA_LIMITS } from '@/config/damacanaLimits';

const DamacanaWarning = () => {
  const cutoffTime = `${DAMACANA_LIMITS.cutoffHour}:00`;
  
  return (
    <Alert>
      {t('damacanaRestricted', { cutoffTime })}
    </Alert>
  );
};

​
Welcome Modal

import { useState } from 'react';
import { t } from '@/config/language';

const WelcomeModal = () => {
  const [show, setShow] = useState(true);
  
  if (!show) return null;
  
  return (
    <Modal>
      <p>{t('welcomeMessage')}</p>
      <button onClick={() => setShow(false)}>
        {t('understood')}
      </button>
    </Modal>
  );
};

​
LocalStorage

The language preference is persisted in browser localStorage:
​
Storage Key
suapp-language
​
Storage Value
Language code: 'tr' or 'ar'
​
Behavior
  • Set when toggleLanguage() is called
  • Read on app initialization by getCurrentLanguage()
  • Persists across page refreshes and browser sessions

​
Adding New Translations

To add new translation keys: 
// In language.js
export const LANGUAGES = {
  tr: {
    code: 'tr',
    name: 'Türkçe',
    flag: '🇹🇷',
    translations: {
      // Existing translations...
      
      // Add new key
      myNewKey: "Türkçe metin",
      anotherKey: "Başka bir metin"
    }
  },
  ar: {
    code: 'ar',
    name: 'العربية',
    flag: '🇸🇦',
    translations: {
      // Existing translations...
      
      // Add same key in Arabic
      myNewKey: "نص عربي",
      anotherKey: "نص آخر"
    }
  }
};
Then use in components: 
import { t } from '@/config/language';

const text = t('myNewKey');

Build docs developers (and LLMs) love

Get started for freeTalk to us