Moneycomponent
component
The Money component renders a string of the Storefront API'sMoneyV2 object according to the locale in the component.
The component outputs a <div>. You can customize this component using passthrough props.
Anchor to propsProps
- Anchor to datadataPartialDeep<MoneyV2, {recurseIntoArrays: true}>required
An object with fields that correspond to the Storefront API's MoneyV2 object.
- ComponentGeneric
An HTML tag or React Component to be rendered as the base element wrapper. The default is
div.- Anchor to measurementmeasurementPartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>
- Anchor to measurementSeparatormeasurementSeparatorReactNode
Customizes the separator between the money output and the measurement output. Used with the
measurementprop. Defaults to'/'.- Anchor to withoutCurrencywithoutCurrencyboolean
Whether to remove the currency symbol from the output.
- Anchor to withoutTrailingZeroswithoutTrailingZerosboolean
Whether to remove trailing zeros (fractional money) from the output.
Was this section helpful?
Example code
import {Money} from '@shopify/hydrogen';
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'; export default function ProductMoney({product}) { const price = product.variants.nodes[0].price; return <Money data={price} />; }TypeScript
import {Money} from '@shopify/hydrogen'; import type {Product} from '@shopify/hydrogen/storefront-api-types'; export default function ProductMoney({product}: {product: Product}) { const price = product.variants.nodes[0].price; return <Money data={price} />; }
