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

FALLBACK_LOCALE, FALLBACK_DIR & FALLBACK_LANGUAGE_NAME

constantBeginnerserverbrowser

The engine's assumptions when no language is known: Arabic ('ar'), written right-to-left, named العربية.

import { FALLBACK_LOCALE, FALLBACK_DIR, FALLBACK_LANGUAGE_NAME } from '@salla.sa/twilight-theme-engine/i18n';

In plain words

Sometimes the engine has no language to go on, for example an address without one. It then assumes Arabic, written right-to-left. These three constants are those assumptions, so your own code can make the same choice instead of hard-coding 'ar' and 'rtl'.

Signature

const FALLBACK_LOCALE = 'ar';
const FALLBACK_DIR = 'rtl';              // typed as the literal 'rtl'
const FALLBACK_LANGUAGE_NAME = 'العربية';

Example

app/lib/html-language.ts
import {
  FALLBACK_DIR,
  FALLBACK_LOCALE,
  getLanguageInfo,
} from '@salla.sa/twilight-theme-engine/i18n';

/** lang and dir for an optional locale route param: a store with one language has none in its URLs. */
export function htmlLanguage(locale?: string) {
  if (!locale) return { lang: FALLBACK_LOCALE, dir: FALLBACK_DIR };
  return { lang: locale, dir: getLanguageInfo(locale).dir };
}

How it behaves

  • The engine falls back the same way: rootBeforeLoad and the root head use params.locale || FALLBACK_LOCALE, the request context starts with locale: 'ar', and TwilightProvider uses it when the context has no locale.

  • useTranslation() outside any I18nProvider returns these values (locale: 'ar', direction: 'rtl', isRTL: true, languageName: 'العربية'): they are the defaults of the engine's language context.

  • FALLBACK_DIR is declared as const, so its type is 'rtl' and it fits wherever 'ltr' | 'rtl' is expected.

Gotchas

  • A multilingual store reached without a locale lands on /ar/… even when its main language is English: the generated {-$locale} wrapper redirects to FALLBACK_LOCALE, not to the store's default language. Fix: keep the locale in every link you build; the engine Link adds the current one to locale-less paths.

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.

getLanguageInfo & RTL_LOCALES

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

useTranslation

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

Source and docs