@hixme-ui/currency

Currency

npm i --save @hixme-ui/currency

View it live

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