Product Price

import { ProductPrice } from '@faststore/ui'

import '@faststore/ui/src/components/atoms/Price/styles.scss'
import '@faststore/ui/src/components/molecules/ProductPrice/styles.scss'

<ProductPrice value={950.04} listPrice={999} formatter={useFormattedPrice} />

// Example of formatter
interface PriceFormatterOptions {
  decimals?: boolean
}
 
export const usePriceFormatter = ({ decimals }: PriceFormatterOptions = {}) => {
  return useCallback(
    (price: number) =>
      Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: decimals ? 2 : 0,
      }).format(price),
    [decimals]
  )
}
 
export const useFormattedPrice = (price: number) => {
  const formatter = usePriceFormatter()
 
  return useMemo(() => formatter(price), [formatter, price])
}