Developers
Start building
Themes/Theme SDK/Modules/i18n/Hooks

Hooks

The hooks of @poltura/theme-sdk/i18n.

On this page
import { … } from '@poltura/theme-sdk/i18n';

useTranslations

The platform's own texts, the strings the storefront ships for every theme.

useTranslations(namespace?: string): Translator

Parameters

  • namespace?: string: The dotted prefix the keys are read under.

Returns: A function that reads one text by key.

Example

import { useTranslations } from '@poltura/theme-sdk/i18n';

export function CartTitle() {
  const t = useTranslations('cart');
  return <h1>{t('title')}</h1>;
}

useRichTranslations

Platform texts whose marked passages the theme draws, such as the terms and privacy links in the sign-up consent.

useRichTranslations(namespace?: string): RichTranslator

Parameters

  • namespace?: string: The dotted prefix the keys are read under.

Returns: A function that reads one text by key and draws its marked passages.

Example

import { useRichTranslations } from '@poltura/theme-sdk/i18n';
import { Link } from '@poltura/theme-sdk/routing';

export function TermsConsent() {
  const t = useRichTranslations('auth.register');
  return (
    <span>
      {t('termsCheckboxLabel', {
        terms: (chunks) => <Link href='/legal/terms-of-service'>{chunks}</Link>,
        privacy: (chunks) => <Link href='/legal/privacy-policy'>{chunks}</Link>,
      })}
    </span>
  );
}

useLocale

The language the page renders in.

useLocale(): string

Returns: The BCP 47 tag of the page language, such as hu-HU.

Example

import { useLocale } from '@poltura/theme-sdk/i18n';

export function Lang({ children }: { children: string }) {
  return <span lang={useLocale()}>{children}</span>;
}

useNow

The current time, the same on the server and in the browser for the first render.

useNow(): Date

Returns: The instant the page renders at.

Example

import { useFormat, useNow } from '@poltura/theme-sdk/i18n';

export function Today() {
  return <time>{useFormat().date(useNow())}</time>;
}

useTimeZone

The store's time zone, which every store date renders in.

useTimeZone(): string

Returns: The IANA time zone, such as Europe/Budapest.

Example

import { useTimeZone } from '@poltura/theme-sdk/i18n';

export function Zone() {
  return <small>{useTimeZone()}</small>;
}

useThemeText

The theme's own texts in the page language, live while the merchant edits them.

useThemeText(namespace?: string): ThemeText

A key missing in the page language falls back to the theme's base language, then English, then the key itself. Store-wide placeholders such as {store.name} fill themselves.

Parameters

  • namespace?: string: The dotted prefix the keys are read under.

Returns: A function that reads one text by key.

Example

import { useThemeText } from '@poltura/theme-sdk/i18n';

export function Left({ count }: { count: number }) {
  const t = useThemeText('product');
  return <p>{t('left', { count })}</p>;
}

useFormat

The formatter for the page language and the store's time zone.

useFormat(): Formatter

Returns: Functions that write money, numbers, dates and lists.

Example

import { useFormat } from '@poltura/theme-sdk/i18n';
import type { Money } from '@poltura/theme-sdk/price';

export function Total({ total }: { total: Money }) {
  return <strong>{useFormat().money(total)}</strong>;
}

useLocales

The page language and the other languages the storefront offers, for a language switcher.

useLocales(): Locales

Returns: The current language and every available one.

Example

import { useLocales } from '@poltura/theme-sdk/i18n';

export function Languages() {
  const { current, available } = useLocales();
  return (
    <ul>
      {available.map((locale) => (
        <li key={locale.tag} aria-current={locale.tag === current.tag}>
          {locale.label}
        </li>
      ))}
    </ul>
  );
}
Last updated