Skip to content
Twilight React Playground
ثيم رائدaren

getLanguageInfo & RTL_LOCALES

functionBeginnerserverbrowserlive demo

Returns a language code's display name and text direction; RTL_LOCALES lists the four codes the engine treats as right-to-left.

import { getLanguageInfo, RTL_LOCALES } from '@salla.sa/twilight-theme-engine/i18n';

In plain words

Arabic is written from right to left and English from left to right, and a page says which with the HTML dir attribute. getLanguageInfo('ar') returns the plain object { code: 'ar', name: 'العربية', dir: 'rtl' }, ready for dir and lang.

It is an ordinary function, not a hook, so you can call it anywhere. RTL_LOCALES is the list it checks: ['ar', 'fa', 'he', 'ur'].

Signature

function getLanguageInfo(locale: string): {
  readonly code: string;        // the argument, unchanged
  readonly name: string;        // 'العربية' for ar, 'English' for en, otherwise locale.toUpperCase()
  readonly dir: 'rtl' | 'ltr';  // 'rtl' only when RTL_LOCALES includes locale
};

const RTL_LOCALES: string[];    // ['ar', 'fa', 'he', 'ur']

Try it live

getLanguageInfo() returns the display name and text direction the engine uses for a language code.Try this: pick fr: its name is just "FR". Then ar-SA and AR: neither is in RTL_LOCALES, so both read left-to-right.
Storefront canvas · ar · RTL
getLanguageInfo("ar")
{
  "code": "ar",
  "name": "العربية",
  "dir": "rtl"
}

العربية: this paragraph has dir="rtl", so its text starts on the right.

RTL_LOCALES = ["ar","fa","he","ur"]
Controls
What a theme writes
import { getLanguageInfo } from '@salla.sa/twilight-theme-engine/i18n';

export function LanguageBadge() {
  const { name, dir } = getLanguageInfo('ar'); // name: 'العربية', dir: 'rtl'
  return (
    <span className="language-badge" lang="ar" dir={dir}>
      {name}
    </span>
  );
}

Example

app/components/LanguageBadge.tsx
import { getLanguageInfo } from '@salla.sa/twilight-theme-engine/i18n';

export function LanguageBadge({ code }: { code: string }) {
  const { name, dir } = getLanguageInfo(code);
  return (
    <span className="language-badge" lang={code} dir={dir}>
      {name}
    </span>
  );
}

How it behaves

  • The engine decides direction with it: rootBeforeLoad and getTwilightContext().dir (the dir a theme puts on <html>) call it with the URL's locale, and I18nProvider derives useTranslation()'s direction, isRTL, isLTR and languageName from it.

  • It validates nothing: any string gets an answer, and getLanguageInfo('xx') is { code: 'xx', name: 'XX', dir: 'ltr' }. Check a code from outside with isLocale first.

  • For a language menu, useTwilight().settings.languages holds the store's own languages with real names, flag image URLs and is_rtl.

  • RTL_LOCALES is a plain, mutable string[], the same array getLanguageInfo reads. Treat it as read-only.

Gotchas

  • name is a real name only for ar and en. Every other code comes back upper-cased: fr gives FR, ind gives IND. Fix: show shoppers the names in useTwilight().settings.languages, or new Intl.DisplayNames([locale], { type: 'language' }).of(code).

  • Codes are compared exactly: getLanguageInfo('AR') and getLanguageInfo('ar-SA') both return dir: 'ltr', because RTL_LOCALES.includes sees neither as ar. Fix: normalise first, getLanguageInfo(code.split('-')[0].toLowerCase()).

Related

SUPPORTED_LOCALES & isLocale

The 39 language codes the engine accepts at the start of a URL, and isLocale(), which tells whether a string is one of them.

useTranslation

Gives a component the translate function t, the page language, its text direction and the language name.

useTwilight

Reads everything TwilightProvider knows: store, theme, settings, language, direction, current page, login token and the Salla SDK.

Source and docs