Текстовое поле, в котором системная каретка заменена своей. Ширина набранного текста измеряется скрытым зеркалом, и каретка на пружине плавно догоняет новую позицию при каждом символе, удалении, выделении или перемещении стрелками.
Длинный текст прокручивается внутри поля так, чтобы каретка оставалась на виду, а в режиме пароля ширина считается по символам-маскам. Под ним для сравнения стоит обычное поле с системной кареткой.
Скопируйте эти файлы в components/smooth-caret-input/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { SmoothCaretInput } from "@/components/smooth-caret-input/smooth-caret-input";
export function SearchField() {
return (
<SmoothCaretInput
placeholder="Поиск"
fontSize={20}
spring={{ stiffness: 600, damping: 32, mass: 0.4 }}
/>
);
}type?Тип поля
Тип "text" | "password"·По умолчанию "text"
value?Значение в управляемом режиме
Тип string
defaultValue?Начальное значение
Тип string
onChange?Вызывается при вводе
Тип (event: ChangeEvent<HTMLInputElement>) => void
placeholder?Текст пустого поля
Тип string·По умолчанию "плавный ввод"
fontSize?Размер шрифта в пикселях
Тип number·По умолчанию 24
spring?Пружина движения каретки
Тип { stiffness, damping, mass }·По умолчанию { 500, 30, 0.5 }
wrapperClassName?Классы обёртки поля
Тип string
className?Классы поля ввода
Тип string