Крупное поле для суммы или кода, в котором символы не просто появляются, а выезжают снизу и проявляются. При удалении символ уезжает обратно вниз и растворяется, а соседние плавно сдвигаются на освободившееся место.
Настоящее поле ввода остаётся под анимированным слоем, поэтому работают курсор, выделение, вставка и привычная клавиатура. Пока значение пустое, виден полупрозрачный заполнитель.
Скопируйте эти файлы в components/animated-number-input/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useState } from "react";
import { AnimatedNumberInput } from "@/components/animated-number-input/animated-number-input";
export function AmountField() {
const [value, setValue] = useState("");
return <AnimatedNumberInput inputValue={value} setInputValue={setValue} placeholder="000" />;
}inputValueТекущее значение
Тип string
setInputValue?Обработчик изменения значения
Тип (value: string) => void
placeholder?Заполнитель пустого поля
Тип string
fontSize?Размер символов в пикселях, по умолчанию 45
Тип number
color?Цвет символов, по умолчанию цвет темы
Тип string
className?Классы корневого блока
Тип string