Skip to main content
The useFormatCurrency hook provides currency formatting functionality using the currency settings from DContext. It returns both a format function and pre-formatted values.

​
Import

import { useFormatCurrency } from '@dynamic-framework/ui-react';

​
Signature

function useFormatCurrency(...args: Array<number>): {
  format: (value: number, currencyOptions?: CurrencyProps) => string;
  values: string[];
}

​
Parameters

​
...args
number[]
Optional array of numbers to format immediately. These values will be returned in the values array.

​
Return Value

​
format
function
A memoized function that formats a number as currency.
​
values
string[]
Array of pre-formatted currency strings for the numbers passed in args

​
Types

type CurrencyProps = {
  symbol: string;      // Currency symbol (e.g., "$", "€")
  precision: number;   // Number of decimal places
  separator: string;   // Thousands separator (e.g., ",")
  decimal: string;     // Decimal separator (e.g., ".")
};

​
Usage

​
Basic Usage

import { useFormatCurrency } from '@dynamic-framework/ui-react';

function PriceDisplay() {
  const { format } = useFormatCurrency();
  const price = 1234.56;

  return <div>{format(price)}</div>;
  // Output: "$1,234.56" (based on context settings)
}

​
Format Multiple Values

import { useFormatCurrency } from '@dynamic-framework/ui-react';

function FinancialSummary({ revenue, expenses, profit }) {
  const { values } = useFormatCurrency(revenue, expenses, profit);
  const [revenueStr, expensesStr, profitStr] = values;

  return (
    <div>
      <div>Revenue: {revenueStr}</div>
      <div>Expenses: {expensesStr}</div>
      <div>Profit: {profitStr}</div>
    </div>
  );
}

​
Custom Currency Options

import { useFormatCurrency } from '@dynamic-framework/ui-react';

function EuroPrice({ amount }) {
  const { format } = useFormatCurrency();

  const euroOptions = {
    symbol: '€',
    precision: 2,
    separator: '.',
    decimal: ','
  };

  return <div>{format(amount, euroOptions)}</div>;
  // Output: "€1.234,56" for amount = 1234.56
}

​
Dynamic Formatting

import { useFormatCurrency } from '@dynamic-framework/ui-react';

function ProductPrice({ price, onSale, discount }) {
  const { format } = useFormatCurrency();
  const finalPrice = onSale ? price * (1 - discount) : price;

  return (
    <div>
      {onSale && (
        <span style={{ textDecoration: 'line-through' }}>
          {format(price)}
        </span>
      )}
      <span>{format(finalPrice)}</span>
    </div>
  );
}

​
Context Setup

This hook requires DContextProvider with currency configuration: 
import { DContextProvider } from '@dynamic-framework/ui-react';

function App() {
  return (
    <DContextProvider
      currency={{
        symbol: '$',
        precision: 2,
        separator: ',',
        decimal: '.'
      }}
    >
      <YourApp />
    </DContextProvider>
  );
}

​
Implementation Details

The hook uses useDContext() to access currency settings and useCallback to memoize the format function, preventing unnecessary re-renders. The format function is stable unless the currency context changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us