Ian McNally

Currency masking in React

June 01, 2015

I just open sourced a currency masker for React!

Check it out:

 An input that is getting masked (really, re-evaluated) as currency.

It takes a normal number input, and converts the last two digits into cents.

Using the mask makes number inputting faster, since a user only has to input digits, not dots too. It works great on mobile, with pattern=”\d*”, which launches the numeric keypad. Bigger numbers means less typing errors.

I just added it into Farely. The speed and accuracy on a numeric keypad will keep the impatient and the creeps at bay when you’re trying to refill your metrocard.

Source code is on Github.

And it’s published to npm!

So: npm install react-currency-masked-input!

Github & npm

Ian McNally

Hey, I'm Ian. I build websites and write about what I learn as I go. Follow me on Twitter.