useMoney
Format prices with the store's currency symbol, number style and price settings.
Use useMoney whenever you show a price, so amounts follow the store's currency symbol, number style and price settings.
Example
import { useMoney } from '@salla.sa/twilight-theme-engine/hooks/useMoney';
export function Price({ value }: { value: number }) {
const { format } = useMoney();
return <span className="price">{format(value)}</span>;
}hooks/use-money
API
function useMoney(): UseMoneyResult;| Prop | Type | Description |
|---|---|---|
format | (amount: number | string | undefined, options?) => ReactNode | Formats an amount. Returns a React node, not a string. |
parse | (moneyString: string) => number | Turns a formatted money string back into a number. Understands Western and Arabic-Indic separators. |
isValid | (value: unknown) => boolean | True for finite numbers and numeric strings. |
Options of format:
| Prop | Type | Description |
|---|---|---|
currency? | string | Currency code. Default: "SAR". |
type? | "product" | "general" | With "product", an empty amount shows a dash when the store enables "show price as dash". Default: "product". |
Gotchas
format defaults to SAR, not to the store's currency. If your store sells in another currency, pass { currency }, or amounts are labelled as riyals.
- The amount is printed as you pass it, with no rounding or added decimals:
10.5shows10.5, and the string"10.50"keeps its zero. - The label comes from the store's currency list (the symbol, or the code when there is none), written after the amount:
100 SAR. When the store enables the riyal symbol and the symbol is SAR, the label is an<i className="sicon-sar" />icon instead, so the result is a React node, not always a string. - When the store enables Arabic numbers, the digits are Arabic.
- A missing or empty amount renders an empty string, or
-for products when the store enables the dash setting.
Next
useProductgives you the product whose price you format.ProductCardalready formats its prices with this hook.- Languages and RTL