useTranslation

Use useTranslation for every string a customer reads, and when a component needs to know the current language or text direction.

ExampleCopy Anchor Link

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

export function BackButton() {
  const { t, isRTL } = useTranslation();
  return (
    <button aria-label={t('blocks.header.back', 'Back')}>
      <span aria-hidden="true">{isRTL ? '→' : '←'}</span>
    </button>
  );
}

t(key, fallback) returns the translation for key, or fallback when there is none.

APICopy Anchor Link

function useTranslation(ns?: string | string[]): {
  t: TFunction;
  i18n: i18n;
  ready: boolean;
  locale: string;
  direction: 'ltr' | 'rtl';
  isRTL: boolean;
  isLTR: boolean;
  languageName: string;
};

Argument:

Returns:

GotchasCopy Anchor Link

• It wraps useTranslation from react-i18next and adds the language fields, so t behaves as it does in that library.
• Keys come from the platform's translations and from your theme's locales/<lang>.json files. Theme keys are merged into the theme namespace.
• It works during server rendering, with the language chosen for the request.
• Outside the provider, the language fields fall back to Arabic, right to left.

NextCopy Anchor Link

• Add translation keys adds your own strings step by step.
• Languages and RTL covers direction and layout.
• useTheme also returns isRTL.