react-use-locale-number-input
Version:
A React hook for formatting number inputs based on the user's locale.
49 lines • 2.02 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLocaleNumberInput = exports.numberToLocaleString = void 0;
var react_1 = require("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), "."));
};
var numberToLocaleString = function (number, locale) {
return new Intl.NumberFormat(locale, {}).format(number);
};
exports.numberToLocaleString = numberToLocaleString;
var useLocaleNumberInput = function (value, locale, onChange) {
var _a = (0, react_1.useState)((0, exports.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((0, exports.numberToLocaleString)(number, locale));
onChange(number);
};
var stringValue = (0, exports.numberToLocaleString)(value, locale);
var display = stringValue === dirty ? stringValue : dirty;
return {
handleChange: handleChange,
handleBlur: handleBlur,
value: display,
};
};
exports.useLocaleNumberInput = useLocaleNumberInput;
//# sourceMappingURL=useLocaleNumberInput.js.map