The UnitPrice component renders a string with a UnitPrice as the Storefront API's MoneyV2 object with a reference unit from the Storefront API's UnitPriceMeasurement object.

If children is a function, then it will provide render props for the children corresponding to the object returned by the useMoney hook and the UnitPriceMeasurement object.

Example code


Name Type Description
unitPrice MoneyV2 A MoneyV2 object.
unitPriceMeasurement UnitPriceMeasurement A UnitPriceMeasurement object.
children? ReactNode A function that takes an object returned by the UnitPrice component and returns a ReactNode.
as? ReactNode A ReactNode

Component type

The UnitPrice component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.

GraphQL fragment

The following fragment is available as a string for your GraphQL query using UnitPriceFragment or UnitPrice.Fragment. Using this fragment ensures that you have all the data necessary for rendering the UnitPrice component.