# useMoney (https://docs.salla.dev/twilight/react/hooks/use-money)



Use `useMoney` whenever you show a price, so amounts follow the store's currency symbol, number style and price settings.

## Example [#example]

```tsx title="app/components/product/Price.tsx"
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>;
}
```

<Demo name="hooks/use-money" />

## API [#api]

```ts
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 [#gotchas]

<Callout type="warn">
  `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.
</Callout>

* The amount is printed as you pass it, with no rounding or added decimals: `10.5` shows `10.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 [#next]

* [`useProduct`](https://docs.salla.dev/twilight/react/hooks/use-product) gives you the product whose price you format.
* [`ProductCard`](https://docs.salla.dev/twilight/react/components/product-card) already formats its prices with this hook.
* [Languages and RTL](https://docs.salla.dev/twilight/react/guide/languages-and-rtl)