Money

Formats a numeric amount into a localized currency string and renders it with a currency symbol. The symbol can be placed at the start or end of the amount. Thousands and decimal separators are configurable. The formatted value is memoized and only recomputed when amount, decimalSeparator, thousandsSeparator, or decimalPlaces change.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | amount | number | Yes | — | Numeric value to format and display. | | currencySymbol | string | No | '$' | Currency symbol rendered alongside the amount. | | symbolPosition | 'start' \| 'end' | No | 'start' | Whether the currency symbol appears before or after the amount. | | decimalSeparator | '.' \| ',' | No | ',' | Character used to separate the integer and decimal parts. | | thousandsSeparator | '.' \| ',' | No | '.' | Character used to group thousands in the integer part. | | decimalPlaces | number | No | 2 | Number of decimal digits to display. | | color | string | No | 'textShade' | Color of the text. Accepts theme keys or CSS color strings. | | fontSize | number | No | — | Font size in pixels applied to both symbol and amount. | | fontWeight | React.CSSProperties['fontWeight'] | No | — | Font weight applied to both symbol and amount. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | symbolStyle | React.CSSProperties | No | — | Inline styles for the currency symbol span. | | amountStyle | React.CSSProperties | No | — | Inline styles for the amount span. |

Usage

Basic (Argentine peso)

import Money from '@/components/Money';

export default function Example() {
  return <Money amount={1234567.89} />;
  // Renders: $ 1.234.567,89
}

US dollar with dot separator

import Money from '@/components/Money';

export default function Example() {
  return (
    <Money
      amount={9999.5}
      currencySymbol="USD"
      decimalSeparator="."
      thousandsSeparator=","
      symbolPosition="end"
    />
  );
  // Renders: 9,999.50 USD
}

Custom styling

import Money from '@/components/Money';

export default function Example() {
  return (
    <Money
      amount={450}
      fontSize={24}
      fontWeight="bold"
      color="primary"
      amountStyle={{ letterSpacing: 1 }}
    />
  );
}