@hixme-ui/currency
v2.2.0
Published
hixme-ui Currency component
Downloads
57
Readme
Currency
npm i --save @hixme-ui/currency
Currency Props
| Name | Type | Default | | --------------- | ----------- | -------------- | | defaultSymbol | string | $ | | hideCents | bool | false | | hideCommas | bool | false | | noSymbol | bool | false | | round | bool | false | | value | number | null |
Basic Usage
Currency can use a child value or a value prop for the number, and handles comma placement and rounding of decimals.
import Input from '@hixme-ui/currency'
<Currency value='11.95' />
<Currency>11.95</Currency>
// both output $11.95
<Currency value='1234567.8991' />
// outputs $1,234,567.90
hideCents
<Currency hideCents value='123.8991' />
// outputs $123
hideCommas
<Currency hideCommas value='123456.00' />
// outputs $123456.00
noSymbol
<Currency noSymbol value='123456.00' />
// outputs 123,456.00
round
The round prop will round the number to significant values. If the value is under 100,000, it will round to the nearest dollar. Values of 100,000 and above will round to the nearest thousand
<Currency round value='1236.99' />
// outputs 1,237
<Currency round value='123456.00' />
// outputs 123,000.00
Format
Currency has a static format function if needed outside of a JSX context.
Currency.format({
value: 12.34
})
// outputs $12.34
Currency.format({
value: 1200.34,
hideCents: true,
})
// outputs $1,200
Currency.format({
value: 1234.5678,
hideCommas: true,
defaultSymbol: '#',
})
// outputs $1234.57