Packages
react
components
Money

Money Component

The Money component renders a string representing monetary values according to the locale set in the AirsokoProvider component.

Usage

import React from "react";
import { Money } from "@airsoko/react";
 
const MyComponent = () => {
  const moneyData = {
    amount: "10.99",
    currencyCode: "USD",
  };
 
  return <Money data={moneyData} />;
};
 
export default MyComponent;

Props

NameTypeDefaultDescription
asElementType'div'An HTML tag or React component to be rendered as the base element wrapper.
dataMoneyV2An object with fields that correspond to the Storefront API's MoneyV2 object.
withoutCurrencybooleanWhether to remove the currency symbol from the output.
withoutTrailingZerosbooleanWhether to remove trailing zeros (fractional money) from the output.
measurementUnitPriceMeasurementA UnitPriceMeasurement object.
measurementSeparatorReactNode'/'Customizes the separator between the money output and the measurement output. Defaults to '/'.
otherPropsObjectAny other props accepted by the specified HTML tag or React component.

Notes

  • Ensure that the Money component receives a valid data prop that has amount and currencyCode.
  • The Money component internally utilizes the useMoney hook to process the data prop.
  • If the data prop is invalid, an error will be thrown.
  • The measurement prop is optional and is used for displaying additional measurement information alongside the money value.