useNumberFormatter

Locale-aware number formatting and parsing built on Intl.NumberFormat, decimal or currency, with custom prefix/suffix and rounding.

Usage#

import { useNumberFormatter } from '@primereact/hooks/use-number-formatter';

const formatter = useNumberFormatter({
    value: 1234.56,
    locale: 'en-US',
    mode: 'currency',
    currency: 'USD'
});
 
formatter.formattedValue; // "$1,234.56"
formatter.formatValue(99); // "$99.00"
formatter.parseValue('$1,234.56'); // 1234.56

Options#

value?, optional input; if provided, formattedValue in the return mirrors it.
locale?, localeMatcher?, passed to Intl.NumberFormat.
mode?, 'decimal' (default) or 'currency'.
currency?, currencyDisplay?, ISO code and display style.
useGrouping?, thousands separators. Default true.
minFractionDigits?, maxFractionDigits?, roundingMode?, fraction handling.
prefix?, suffix?, additional text wrapped around the formatted value.
min?, lower bound; controls whether a minus sign is allowed.
format?, false returns the raw string without applying the formatter.

Returns#

formattedValue, formatted representation of options.value.
formatValue(value) / parseValue(text), format or parse on demand.
addWithPrecision(base, inc), floating-point-safe addition, useful for steppers.
Character classifiers (isNumeralChar, isMinusSign, isDecimalSign, allowMinusSign) and index helpers (getDecimalCharIndexes, getCharIndexes, getDecimalLength, concatValues) that power input-mask behaviour.
groupChar, prefixChar, suffixChar, resolved separator characters for the active locale.
resolvedOptions(), forwards Intl.NumberFormat#resolvedOptions.
constructParser(), rebuild the internal parser; the hook calls it automatically when options change.

When to use it#

Anywhere you want consistent localized number rendering without maintaining your own parsers, inputs with currency/percent formatting, read-only totals, calculator-style UIs.