Currency Input for React

Example React Web and React Native currency input solutions.

Problem

Was recently working on a React project and needed a convenient way for a user to enter a currency value (in our case dollars and cents). We needed a solution for React Web (desktop and mobile) as well as React Native.

My mind immediately went to the familiar automated teller machine (ATM) UI / UX were one enters numbers that fill in (and deleted) from the right, e.g., entering the digits 1-2-5–0-0-0 displays $1,250.00.

Tried to Find a Solution

My first assumption was that the browser (and React Native) had a built-in solution. Nope.

• While HTML5 did introduce a variety of input types, there is no currency type. HTML5 Input Types: Where Are They Now?.
• React Native’s TextInput does have a textContentType attribute; none of which is a currency.

Interestingly enough, however, JavaScript has long supported converting numbers to a variety of string representations using Number.prototype.toLocaleString. For example, the following code is particularly relevant to our problem.

const value = '125000';
const valueDisplay = (value / 100).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
});

Found a number of possible libraries:

• react-currency-input
• react-currency-masked-input

But, they were not as popular (few GitHub stars) as I would prefer.

Also, found a promising article, Create a React Currency Input, providing a solution that is built upon the popular react-text-mask library. This solution, however, does not have the ATM UI / UX that I was looking for; requires one to supply a decimal point.

Solution: React Web

It turns out that with relatively little effort, one can create a React Web solution without third-party libraries. The example, react-currency-input, is one such solution.

Some highlights of the CurrencyInput component:

• The solution is provided using TypeScript and React Hooks
• Under the hood, the component is simply a HTML input element with a custom keydown event handler
• It uses the Number.prototype.toLocaleString method to display the value (an integer representing cents) as a currency; in this case the US dollar; using floating point values for currency is a bad idea in JavaScript (unexpected rounding behavior)
• By, optionally, accepting both a className and style attribute one can style it a one pleases

Solution: React Native

Likewise one can create a React Native solution without third-party libraries; RNCurrencyInput.

Some highlights of the CurrencyInput component; first those in common with the React Web version:

• The solution is provided using TypeScript and React Hooks
• It uses the Number.prototype.toLocaleString method to display the value (an integer representing cents) as a currency
• By, optionally, accepting a style attribute one can style it a one pleases; remember React Native does not use classes. The valid styles are those that apply to Text components

Because the React Native TextInput component’s textAlign property is not supported by iOS (and having right-alignment was important to us), this solution uses a combination of a Text component with a transparent TextInput overlay. Some highlights:

• The key is that we can use the onLayout attribute on the Text component to drive the height and width of the TextInput component
• We use a negative top margin to overlay the TextInput on top of the Text component

Wrap Up

Hope you found this useful.