use-currency-formatter

Since: ver.10.0.0 Implements predefined formats for Currency internationalization.

Props

Prop name	Type	Default	Description
`code`	`string \| undefined`	`EUR`	The currency ISO code (e.g.: `EUR` for Euros, `USD` for United States Dollar).
`display`	`"symbol" \| "narrowSymbol" \| "code" \| "name" \| undefined`	`symbol`	The currency display format.
`locale`	`LocalesArgument`		The locale for number formatting. Used for `Intl.NumberFormat` API.
`intlFormatOptions`	`NumberFormatOptions \| undefined`		Options forwarded to Intl.NumberFormat API. Intl.NumberFormat

For most of the cases we strongly advice to use provided Currency component as it also allows for better visual and semantic consistency.

useCurrencyFormatter allows for more granular currency formatting as it returns a pre-configured formatter object. This is useful for performance optimizations or if you need access to more formatting methods like formatRange or formatToParts.

import { useCurrencyFormatter } from '@flixbus/honeycomb-react';

const PriceRange = ({ priceStart, priceEnd, locale }) => {
  const { formatter } = useCurrencyFormatter({ locale });
  return <p data-testid="formatter-output">{formatter.formatRange(priceStart, priceEnd)}</p>;
};

<>
  Ramen prices in the area vary between: <PriceRange priceStart={9} priceEnd={16} locale="de" />
</>
import { useCurrencyFormatter } from '@flixbus/honeycomb-react';

const PriceRange = ({ priceStart, priceEnd, locale }) => {
  const { formatter } = useCurrencyFormatter({ locale });
  return <p data-testid="formatter-output">{formatter.formatRange(priceStart, priceEnd)}</p>;
};

<>
  Ramen prices in the area vary between: <PriceRange priceStart={9} priceEnd={16} locale="de" />
</>