react-use-locale-number-input/dist/esm/useLocaleNumberInput.js

A React hook for formatting number inputs based on the user's locale.

import { useState } from "react";
var REGEX = /\p{Number}/gu;
var getSeparators = function (locale) {
    var format = Intl.NumberFormat(locale);
    return {
        thousandSeparator: format.format(11111).replace(REGEX, ""),
        decimalSeparator: format.format(1.1).replace(REGEX, ""),
    };
};
var stringToLocaleNumber = function (stringNumber, locale) {
    var _a = getSeparators(locale), thousandSeparator = _a.thousandSeparator, decimalSeparator = _a.decimalSeparator;
    return parseFloat(stringNumber
        .replace(new RegExp("\\" + thousandSeparator, "g"), "")
        .replace(new RegExp("\\" + decimalSeparator), "."));
};
export var numberToLocaleString = function (number, locale) {
    return new Intl.NumberFormat(locale, {}).format(number);
};
export var useLocaleNumberInput = function (value, locale, onChange) {
    var _a = useState(numberToLocaleString(value, locale)), dirty = _a[0], setDirty = _a[1];
    var handleChange = function (event) {
        var number = stringToLocaleNumber(event.target.value, locale);
        setDirty(event.target.value);
        onChange(isNaN(number) ? 0 : number);
    };
    var handleBlur = function (event) {
        var number = stringToLocaleNumber(event.target.value, locale);
        if (isNaN(number)) {
            setDirty("0");
            onChange(0);
            return;
        }
        setDirty(numberToLocaleString(number, locale));
        onChange(number);
    };
    var stringValue = numberToLocaleString(value, locale);
    var display = stringValue === dirty ? stringValue : dirty;
    return {
        handleChange: handleChange,
        handleBlur: handleBlur,
        value: display,
    };
};
//# sourceMappingURL=useLocaleNumberInput.js.map