Choose a version:

Money

The Money component renders a string of the Storefront API'sMoneyV2 object according to the locale in the ShopifyProvider component. The component outputs a <div>. You can customize this component using passthrough props.

Anchor to propsProps

Anchor to data data PartialDeep<MoneyV2, {recurseIntoArrays: true}> required: An object with fields that correspond to the Storefront API's MoneyV2 object.
Anchor to as as ComponentGeneric: An HTML tag or React Component to be rendered as the base element wrapper. The default is div.
Anchor to measurement measurement PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>: A UnitPriceMeasurement object.
Anchor to measurementSeparator measurementSeparator ReactNode: Customizes the separator between the money output and the measurement output. Used with the measurement prop. Defaults to '/'.
Anchor to withoutCurrency withoutCurrency boolean: Whether to remove the currency symbol from the output.
Anchor to withoutTrailingZeros withoutTrailingZeros boolean: Whether to remove trailing zeros (fractional money) from the output.

Examples

import {Money} from '@shopify/hydrogen-react';

export default function ProductMoney({product}) {

const price = product.variants.nodes[0].price;

return <Money data={price} />;

}

Examples

Example code

Description

I am the default example

JavaScript

import {Money} from '@shopify/hydrogen-react';

export default function ProductMoney({product}) {
  const price = product.variants.nodes[0].price;

  return <Money data={price} />;
}

TypeScript

import {Money} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export default function ProductMoney({product}: {product: Product}) {
  const price = product.variants.nodes[0].price;

  return <Money data={price} />;
}

Anchor to relatedRelated

useMoney

Was this page helpful?