NumberFormat

Использование​

Компонент NumberFormat представляет собой поле ввода с поле ввода числовых значений. Он реализован на компоненте TextField и наследует практически все его свойства (size, view, disabled, label и тд.)

Разделитель тысяч и десятичных знаков​

Разделитель тысяч задается с помощью свойства thousandSeparator, а разделитель десятичных знаков с помощью decimalSeparator:

Live Editor
Result
Open in CodeSandbox

Стиль группировки тысяч​

Поддерживается четыре вида группировок:

  • 'thousand' (123 456 789)
  • 'lakh' (индийский стиль, 12 34 56 789)
  • 'wan' (китайский стиль, 1 2345 6789)
  • 'none' (без группировки)
Live Editor
Result
Open in CodeSandbox

Количество знаков после запятой​

Количество знаков после запятой задается с помощью свойства decimalScale. Если же необходимо, чтобы число имело определенное количество знаков после запятой, то нужно задать fixedDecimalScale:

Live Editor
Result
Open in CodeSandbox

Отрицательные числа​

Свойство allowNegative позволяет вводить отрицательные числа:

Live Editor
Result
Open in CodeSandbox

Ведущие нули​

Чтобы разрешить в числе ведущие нули, нуджно указать свойство allowLeadingZeros:

Live Editor
Result
Open in CodeSandbox

Функция форматирования​

Для приведения числа к нужному формату можно использовать функцию numberFormatter. Она принимает два параметра:

  • строковое значение
  • объект с параметрами форматирования
const num = 100.23
const options = {
    /**
     * Разделитель тысяч.
     * Может быть строкой (например, " ").
     * @example 123 456 789
     */
    thousandSeparator: ' ',
    /**
     * Разделитель десятичных знаков (например, ".").
     * @example 123.456
     */
    decimalSeparator: '.',
    /**
     * Количество знаков после запятой.
     */
    decimalScale: 3,
    /**
     * Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули).
     */
    fixedDecimalScale: false,
    /**
     * Разрешает ввод отрицательных чисел.
     */
    allowNegative: true,
    /**
     * Разрешает ведущие нули (например, "0123").
     */
    allowLeadingZeros: false,
}

const value = numberFormatter(String(num), options)