Price Components

These components use useIgPrices() internally. See docs for details on price-return logic.

<IgPrice/> and <IgCompareAtPrice/>

The <IgPrice/> and <IgCompareAtPrice/>components are recommended as they will color prices throughout your page while in Integration Mode.

The priceFormatter prop may be used to format the returned price for your site.

export interface IgPriceProps {
  className?: string | undefined;
  productId?: string;
  variantId?: string;
  originalPrice: number;
  originalCompareAtPrice?: number;
  currencyCode?: string;
  priceFormatter?: PriceFormatter;
}

export type PriceFormatter = (value: number, currencyCode?: string) => string;