Крупное поле для ввода суммы, как в платёжных приложениях. Пока число короткое, оно набирается огромным шрифтом, а по мере ввода шрифт плавно уменьшается, чтобы сумма вместе с префиксом и суффиксом всегда помещалась в заданную ширину.
Во время набора число сразу разбивается на разряды по выбранному стандарту: американскому, европейскому, с пробелами, швейцарскому или индийскому. При смене формата уже введённое значение переформатируется без потери цифр.
Скопируйте эти файлы в components/autoscale-input/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { AutoscaleInput } from "@/components/autoscale-input/autoscale-input";
export function AmountField() {
return <AutoscaleInput numberFormat="space" prefix="" suffix=" ₽" maxSize={96} />;
}numberFormat?Стандарт разрядов и дробной части
Тип "us" | "eu" | "space" | "ch" | "in" | "none" | "string"·По умолчанию "us"
prefix?Текст перед числом
Тип string·По умолчанию "$"
suffix?Текст после числа
Тип string·По умолчанию ""
minSize?Минимальный размер шрифта в пикселях
Тип number·По умолчанию 18
maxSize?Максимальный размер шрифта в пикселях
Тип number·По умолчанию 100
maxWidth?Максимальная ширина поля в пикселях
Тип number·По умолчанию 384
paddingX?Внутренний отступ по бокам
Тип number·По умолчанию 24
value?Значение в управляемом режиме
Тип string | number
defaultValue?Начальное значение
Тип string | number
onChange?Вызывается с отформатированным значением
Тип (event) => void
placeholder?Текст пустого поля
Тип string
wrapperClassName?Классы внешней обёртки
Тип string
containerClassName?Классы контейнера с полем
Тип string
className?Классы самого поля ввода
Тип string