Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
Usage
1import { Price } from "@behivetech/atoms.price";23<Price amountCents={125000} currency="USD" size="lg" />;
The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.
Examples
Open all 3 →Basic Price
1const BasicPrice = () => <Price amountCents={125000} currency="USD" />;23render(<BasicPrice />);
Price Sizes
1const PriceSizes = () => (2 <>3 <Price amountCents={125000} currency="USD" size="sm" />{" "}4 <Price amountCents={125000} currency="USD" size="md" />{" "}5 <Price amountCents={125000} currency="USD" size="lg" />6 </>7);89render(<PriceSizes />);
Properties
Price props
| Prop | Type | Default | Description |
|---|---|---|---|
amountCents* | number | — | The amount in cents, as an integer; other values are rounded |
className | string | — | Additional class names to merge with the component root element |
currency | "USD" | USD | The currency code; only USD is supported, so it defaults to USD until a second currency is added |
locale | string | en-US | BCP 47 locale the amount is formatted in; defaults to en-US so the server render and hydration match |
size | "sm" | "md" | "lg" | md | Controls the type size; defaults to md |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).