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

useNumber

hookBeginnerserverbrowserlive demo

Turns digits into Arabic-Indic numerals (١٢٣) when the store has Arabic numbers switched on, whatever the page language.

import { useNumber, UseNumberResult } from '@salla.sa/twilight-theme-engine/hooks';

In plain words

Some Arabic stores prefer to show numbers as ١٢٣ rather than 123. The merchant chooses this in the Salla dashboard. useNumber() gives your component a format function that follows that choice: format(42) returns "٤٢" when it is on and "42" when it is off.

toArabic always converts, and useArabicNumerals is a plain true or false telling you what the merchant chose.

Signature

function useNumber(): UseNumberResult

interface UseNumberResult {
  format: (number: number | string) => string;   // follows the store setting
  toArabic: (input: number | string) => string;  // always converts 0-9
  useArabicNumerals: boolean;                     // store.settings.arabic_numbers_enabled
}

Try it live

useNumber() swaps digits for Arabic-Indic ones when the store turns Arabic numbers on. This demo store does.Try this: switch the language pill to en: format() still returns Arabic-Indic digits, because it never looks at the language.
Storefront canvas · ar · RTL
useArabicNumerals
true
format(value)
Order #١٢٥٠, ٣ items
toArabic(value)
Order #١٢٥٠, ٣ items
Controls
A number or any text containing digits.
What a theme writes
import { useNumber } from '@salla.sa/twilight-theme-engine/hooks';

export function OrderLabel() {
  const { format } = useNumber();
  return <span>{format('Order #1250, 3 items')}</span>;
}

Example

app/components/StockCount.tsx
import { useNumber } from '@salla.sa/twilight-theme-engine/hooks';

export function StockCount({ quantity }: { quantity: number }) {
  const { format } = useNumber();
  return <span className="stock-count">{format(quantity)}</span>;
}

How it behaves

  • Only the digits 0-9 inside String(value) are replaced. There is no rounding, grouping or currency: format(1234.5) is "١٢٣٤.٥". Use useMoney or Intl.NumberFormat for those.

  • It reads store.settings.arabic_numbers_enabled through useTwilight(), so it throws outside TwilightProvider.

  • useArabicNumerals is a boolean value, not a hook, despite its name.

  • It has no subpath of its own: import it from @salla.sa/twilight-theme-engine/hooks.

Gotchas

  • It ignores the page language. On the English pages of a store with Arabic numbers on, format still returns Arabic-Indic digits, while useMoney().format (which also requires an ar locale) returns Western ones. To follow the language, check useTranslation().locale.startsWith('ar') before calling format.

  • docs/18-hooks-api.md imports it from @salla.sa/twilight-theme-engine/hooks/useNumber. That subpath is not in the package exports, so the import fails to resolve. Import from @salla.sa/twilight-theme-engine/hooks.

Related

useMoney

Formats prices in the page language (with the riyal icon for SAR), and parses or validates amounts.

useDate

Formats dates and "2 hours ago" style relative times in the page language, using the browser or server Intl APIs.

Source and docs