cchanxzy/react-currency-input-field

💰 React Currency Input Field — nhập số tiền tệ đẹp chuẩn UX

Một thành phần React nhẹ (7.6kB) để nhập và định dạng giá trị số tiền tệ, hỗ trợ đầy đủ tính năng mà không cần thêm dependency.

react-currency-input-field là một thành phần React được viết bằng TypeScript, thiết kế riêng để xử lý trường nhập liệu số tiền tệ. Nó tự động chèn dấu phẩy phân tách nhóm, hỗ trợ tiền tố/ghãn (như $, £), và cho phép người dùng nhập tắt với cú pháp viết tắt (1k → 1,000). Phù hợp cho các ứng dụng tài chính, thương mại điện tử, hoặc bất kỳ nơi cần nhập số có định dạng.

✨ Điểm nổi bật

• Hỗ trợ viết tắt: chuyển đổi nhanh như 1k → 1,000, 2.5m → 2,500,000.
• Tiền tố và hậu tố: thêm ký tự như $, £, € trước/sau giá trị.
• Tự động chèn dấu phẩy: định dạng số theo kiểu hàng nghìn tự động.
• Cấu hình đa ngôn ngữ: sử dụng Intl để hỗ trợ định dạng theo vùng miền.
• Tăng/giảm bằng phím mũi tên: dùng ArrowUp/ArrowDown để thay đổi giá trị.
• Giới hạn số thập phân: kiểm soát số chữ số sau dấu thập phân.
• TypeScript đầy đủ: hỗ trợ kiểu dữ liệu hoàn chỉnh.
• Không dependency thời gian chạy: chỉ dùng thư viện chuẩn, kích thước nhỏ gọn.

💡 Vì sao đáng chú ý

Khác với các thư viện nhập số phức tạp, react-currency-input-field tập trung vào trải nghiệm người dùng trực tiếp trong trường nhập liệu. Nó xử lý đồng thời hiển thị đẹp và giữ nguyên giá trị thực tế thông qua callback onValueChange. Thành phần này nhẹ, nhanh, và dễ tích hợp vào bất kỳ dự án React nào cần xử lý số tiền.

#React #TypeScript #CurrencyInput #OpenSource #TiniX