Working with Translations

Gymlium handles all translation management. Your job as a template developer is to use the t() function for every piece of user-facing text — never hardcode strings.

Using `t()`

The t() function is available from the useApp() hook:


import { useApp } from '@/hooks/useApp'
 
export default function HomeContent() {
  const { t, clientName } = useApp()
 
  return (
    <main>
      <h1>{t('welcomeTo')} {clientName}</h1>
      <p>{t('heroSubtitle')}</p>
      <a href="#">{t('getStarted')}</a>
    </main>
  )
}

How it works

The platform provides a translation dictionary for each locale
t('key') looks up the key in the current locale’s dictionary
If the key exists, the translated string is returned
If the key doesn’t exist, the key itself is returned as a fallback

Common translation keys

These keys are available in all Gymlium locales. Use them in your template:

Key	English value
`home`	Home
`about`	About
`services`	Services
`blog`	Blog
`contact`	Contact
`login`	Sign In
`logout`	Sign Out
`myAccount`	My Account
`schedule`	Schedule
`events`	Events
`testimonials`	Testimonials
`pricing`	Pricing
`privacy`	Privacy Policy
`terms`	Terms of Service
`welcomeTo`	Welcome to
`heroSubtitle`	Your personal training journey starts here
`getStarted`	Get Started
`learnMore`	Learn More
`viewServices`	View Services
`bookSession`	Book a Session
`readMore`	Read More
`viewAll`	View All
`allRightsReserved`	All rights reserved
`footerTagline`	Transform your body, transform your life
`toggleMenu`	Toggle menu
`noResultsFound`	No results found
`loading`	Loading…
`backToHome`	Back to Home
`sendMessage`	Send Message
`yourName`	Your Name
`yourEmail`	Your Email
`message`	Message

Never hardcode text


// ❌ Wrong — this will only work in English
<button>Sign In</button>
 
// ✅ Correct — works in all 14 languages
<button>{t('login')}</button>


// ❌ Wrong — hardcoded text in JSX
<p>No results found</p>
 
// ✅ Correct — uses translation
<p>{t('noResultsFound')}</p>

Hardcoded text is one of the most common reasons for template rejection during review. Automated scans check for untranslated strings in your components.

Locale-aware formatting

Numbers

Use Intl.NumberFormat with the current locale for number formatting:


const { locale } = useApp()
 
const formatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'GBP',
})
 
return <span>{formatter.format(29.99)}</span>
// en: £29.99
// ar: ٢٩٫٩٩ ج.م.
// de: 29,99 £

Dates

Use Intl.DateTimeFormat with the current locale:


const { locale } = useApp()
 
const dateFormatter = new Intl.DateTimeFormat(locale, {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
})
 
return <time>{dateFormatter.format(new Date())}</time>
// en: April 26, 2026
// ar: ٢٦ أبريل ٢٠٢٦
// fr: 26 avril 2026

Relative time


const { locale } = useApp()
 
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
 
return <span>{rtf.format(-1, 'day')}</span>
// en: yesterday
// ar: أمس
// fr: hier

Always pass the locale from useApp() to Intl formatters. This ensures numbers, dates, and relative times display correctly for every language.