daformat/react-number-flow-input

This is a small React component that turns an ordinary number input field into an animated one. As you type, each digit slides into place. If you select a digit and replace it, the new digit rolls past the old one like the wheels on a fruit machine. If the number is changed from outside, for example by code that updates the state, every digit rolls together to the new value. The visual style is modelled on a popular library called NumberFlow, but this version is a single React component with zero runtime dependencies beyond React 18 or newer. Inside the component there are actually two fields layered together. One is a contenteditable element that shows the animated digits to the user, and the other is a hidden native input element that holds the plain number. The hidden input is what HTML forms see, so the component can carry name, required, min, max, minLength, and maxLength attributes and submit naturally inside a normal form tag. The component handles many small details that come up in real number-entry fields. It can be controlled by passing a value prop or left uncontrolled with a defaultValue. It supports locale-aware formatting through the browser's built-in Intl.NumberFormat, so 1234567 can render as 1,234,567 in English or 1.234.567 in German. It clamps the number of digits after the decimal point, blocks the decimal key entirely when decimalScale is zero, allows negative numbers when asked, can add a leading zero to values like .5, and lets you supply an isAllowed function to reject any value you do not want. Usage is straightforward. After installing the package from npm, yarn, pnpm, bun, or deno, you import NumberFlowInput and drop it into your JSX with the props you need. Animations come built in, with a small style tag injected into the document head on first mount and no separate CSS import required. The package ships TypeScript types and over 220 unit and integration tests.