Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
Examples of v0.1.0 are shown as code; only the latest version runs live. Open the live examples →
The default md size, formatted from integer cents.
Basic Price
1const BasicPrice = () => <Price amountCents={125000} currency="USD" />;23render(<BasicPrice />);
Every size: sm for list meta, md for checkout lines, lg for detail pages and totals.
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 />);
The amount is formatted in the given locale; the value attribute stays a plain decimal.
Price Locale
1const PriceLocale = () => (2 <Price amountCents={125000} currency="USD" locale="de-DE" />3);45render(<PriceLocale />);