daformat

daformat / react-number-flow-input

Public

A zero-dependency React component that renders an animated number-flow like number input

hello-mat.comdesign-engineeringcomponentnumber-flow-input animated component input number-flow react
10
0
100% credibility
Found May 20, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

React Number Flow Input is a React component that creates animated number input fields. When users type numbers, each digit animates in with a smooth rolling effect. The component supports locale-aware formatting (automatically adding commas or other separators based on the user's country), works with native HTML forms, and can be used as a controlled or uncontrolled component. It has zero runtime dependencies beyond React itself and includes comprehensive testing.

How It Works

1
🔍 You discover an animated number input

You find a React component that makes number fields feel alive, with digits that roll and flow as you type.

2
📦 You add it to your project

With one simple command, the component installs and is ready to use in your React application.

3
🎨 You place it in your form

You drop the component into your checkout, settings, or data-entry screen where you need a number field.

4
✨ Digits roll into place as you type

When someone types a number, each digit animates smoothly—like wheels spinning into position.

5
You choose how it formats numbers
🌍
Automatic locale formatting

Numbers adapt to how people write them in different countries—dots, commas, or spaces.

🔢
Simple number display

Numbers appear clean and unformatted, just as typed.

6
📝 The form submits the value correctly

When the form is submitted, the number works perfectly with your backend—just like a regular input.

🎉 Your users get a delightful number input

Everyone who uses your form enjoys typing numbers that animate smoothly and format automatically.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is react-number-flow-input?

A React component that renders an animated number input with the popular barrel-wheel digit effect made famous by iOS number pickers. Digits roll into place as you type, separators slide in and out, and external value changes animate as a coordinated roll across every digit. The component is built in TypeScript and ships as a zero-dependency package -- it only peer-depends on React 18+. It handles locale-aware formatting with thousand separators, decimal scale clamping, negative numbers, and integrates with native HTML forms through a hidden input element.

Why is it gaining traction?

The barrel-wheel animation is the hook. Developers who want that polished iOS feel without building it from scratch finally have an off-the-shelf option. The zero-dependency claim is genuine -- no surprising bundle bloat from transitive dependencies. The form integration is a thoughtful touch: a hidden input mirrors the value so the component works with standard form submissions, name attributes, and validation constraints. Locale support goes beyond basic formatting -- the component respects locale-specific decimal separators for both display and input, and handles the edge cases that trip up naive implementations.

Who should use this?

Frontend developers building checkout flows, settings panels, or any interface where a number input benefits from visual polish. Teams tired of implementing barrel-wheel animations from scratch will find a production-ready solution here. Product designers evaluating animated input components for design systems will appreciate the demo and the clean API. This is less useful for simple use cases where a standard input suffices, or for projects needing broad browser support beyond modern evergreen browsers.

Verdict

The component is well-architected and the test coverage (220+ tests) suggests careful engineering. At 10 stars, the credibility score sits at 1.0% -- this is a young project without a large community yet. The documentation is thorough and the API is clean, which mitigates some maturity risk. Worth evaluating for animated number inputs, but monitor the project for community growth before committing to a large-scale deployment.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.