Open Source: Currency Masking in React

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

Currency Input from React Stride

Stride's own Ian McNally has open sourced a currency masker for React.

Blog excerpt:

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.