s-m-r-t

CurrencyDisplay

Formatted currency values with locale support. Takes amounts in cents and displays formatted currency with proper symbols.

Installation

typescript 
import { CurrencyDisplay } from '@happyvertical/smrt-svelte';

Basic Usage

Display currency values (amounts are in cents).

$123.45 $99.00 $0.50
svelte 
<CurrencyDisplay amount={12345} />
<CurrencyDisplay amount={9900} />
<CurrencyDisplay amount={50} />

Currency Types

Support for CAD and USD currencies.

CAD
$99.99
USD
US$99.99
svelte 
<CurrencyDisplay amount={9999} currency="CAD" />
<CurrencyDisplay amount={9999} currency="USD" />

Negative Values

Display negative amounts with optional highlighting.

Default
-$50.00
Highlighted
-$50.00
svelte 
<CurrencyDisplay amount={-5000} />
<CurrencyDisplay amount={-5000} highlightNegative />

With Sign

Show explicit +/- signs for all non-zero values.

+$25.00 -$15.00
svelte 
<CurrencyDisplay amount={2500} showSign />
<CurrencyDisplay amount={-1500} showSign />

Highlighted Values

Color-code positive and negative values.

Profit
$150.00
Loss
-$80.00
svelte 
<CurrencyDisplay amount={15000} highlightPositive />
<CurrencyDisplay amount={-8000} highlightNegative />

Sizes

Available in small, medium, and large sizes.

$99.99 $99.99 $99.99
svelte 
<CurrencyDisplay amount={9999} size="sm" />
<CurrencyDisplay amount={9999} size="md" />
<CurrencyDisplay amount={9999} size="lg" />

Table Example

Using CurrencyDisplay in a data table.

Revenue$1,250.00
Expenses-$450.00
Profit$800.00
svelte 
<table>
  <tr><td>Revenue</td><td><CurrencyDisplay amount={125000} highlightPositive /></td></tr>
  <tr><td>Expenses</td><td><CurrencyDisplay amount={-45000} highlightNegative /></td></tr>
  <tr><td>Profit</td><td><CurrencyDisplay amount={80000} highlightPositive size="lg" /></td></tr>
</table>

Props

PropTypeDefaultDescription
amount *number-Amount in cents
currency 'CAD' | 'USD''CAD'Currency code
showSign booleanfalseShow +/- sign for non-zero values
size 'sm' | 'md' | 'lg''md'Display size
highlightNegative booleanfalseHighlight negative values in red
highlightPositive booleanfalseHighlight positive values in green

TypeScript

typescript 
import { CurrencyDisplay } from '@happyvertical/smrt-svelte';

interface Props {
  amount: number;  // In cents
  currency?: 'CAD' | 'USD';
  showSign?: boolean;
  size?: 'sm' | 'md' | 'lg';
  highlightNegative?: boolean;
  highlightPositive?: boolean;
}