Amount

Usage

import { Amount } from '@raystack/apsara/v1'
 
<Amount value={1299} />
<Amount value={1299} currency="EUR" locale="fr-FR" />

Amount Props

Prop	Type	Default
`value`	`number`	`0`
`currency`	`string`	`'USD'`
`valueInMinorUnits`	`boolean`	`true`
`locale`	`string`	`'en-US'`
`hideDecimals`	`boolean`	`false`
`currencyDisplay`	`"symbol" \| "code" \| "name"`	`'symbol'`
`minimumFractionDigits`	`number`	`undefined (uses currency's default)`
`maximumFractionDigits`	`number`	`undefined (uses currency's default)`
`groupDigits`	`boolean`	`true`

Examples

Basic

<Flex gap={4}>
  <Amount value={1299} />
  <Amount value={1299} currency="EUR" locale="fr-FR" />
  <Amount value={1299} hideDecimals />
  <Amount value={1299} currencyDisplay="code" />
  <Amount value={12.99} valueInMinorUnits={false} />
  <Amount value={129999999} groupDigits />
</Flex>

Currency Variants

<Flex gap={4}>
  <Amount value={1299} currency="JPY" />
  <Amount value={1299} currency="BHD" />
  <Amount value={1299} currency="INR" />
  <Amount value={1234} minimumFractionDigits={3} maximumFractionDigits={3} />
</Flex>

valueInMinorUnits

<Flex gap={4}>
  <Amount value={1299} valueInMinorUnits /> {/* $12.99 */}
  <Amount value={12.99} valueInMinorUnits={false} /> {/* $12.99 */}
</Flex>

locale

<Flex gap={4}>
  <Amount value={1299} locale="en-US" /> {/* $12.99 */}
  <Amount value={1299} currency="EUR" locale="de-DE" /> {/* 12,99 € */}
  <Amount value={1299} currency="JPY" locale="ja-JP" /> {/* ￥1,299 */}
</Flex>

hideDecimals

<Flex gap={4}>
  <Amount value={1299} hideDecimals /> {/* $12 */}
  <Amount value={1234} hideDecimals /> {/* $12 */}
</Flex>

currencyDisplay

<Flex gap={4}>
  <Amount value={1299} currencyDisplay="symbol" /> {/* $12.99 */}
  <Amount value={1299} currencyDisplay="code" /> {/* USD 12.99 */}
  <Amount value={1299} currencyDisplay="name" /> {/* 12.99 US dollars */}
</Flex>

groupDigits

<Flex gap={4}>
  <Amount value={123456789} groupDigits /> {/* $1,234,567.89 */}
  <Amount value={123456789} groupDigits={false} /> {/* $1234567.89 */}
</Flex>

With Text

<Flex gap={4}>
  <Text>
    Total: <Amount value={1299} />
  </Text>
  <Text>
    Discount: <Amount value={-299} />
  </Text>
  <Text>
    Tax: <Amount value={199} />
  </Text>
</Flex>

AmountnewNEW

Usage

Amount Props

Examples

Basic

Currency Variants

valueInMinorUnits

locale

hideDecimals

currencyDisplay

groupDigits

With Text

On this page