Formatting Amount in Material-UI Textfield with react-number-format

React.js material-ui: How to format Textfield as an amount

When working with material-ui Textfield components in React.js, you may come across the need to format the input as an amount with thousands separators and decimal points. In this tutorial, we will explore two different approaches to achieve this formatting: using the react-number-format library and the toLocaleString() method.

Using react-number-format

The react-number-format library provides an easy way to format input fields with various numeric formats. To get started, make sure you have installed the library by running the following command:

npm install react-number-format

Once installed, import the NumberFormat component from the library and add it to your code:

import NumberFormat from 'react-number-format';

Now, you can integrate react-number-format with the material-ui TextField component. Here’s an example:

<NumberFormat
  customInput={TextField}
  onValueChange={(values) => setNumberFormatState(values.value)}
  value={numberFormatState}
  variant="outlined"
/>

Here, we pass the TextField component as a customInput to NumberFormat. The onValueChange event allows us to capture the formatted value and store it in the state variable, numberFormatState.

Using toLocaleString()

Another approach to formatting the Textfield as an amount is by using the toLocaleString() method provided by JavaScript. This method converts a number into a formatted string according to the locale settings.

To apply this formatting, modify your code as follows:

const handleInputChange = (e) => {
  const inputValue = e.target.value.replace(/,/g, '');
  const formattedValue = parseFloat(inputValue).toLocaleString('en', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
  setDebitAmount(formattedValue);
};

...

<TextField
  variant="outlined"
  margin="normal"
  required
  fullWidth
  type="text"
  id="debitAmount"
  label="Amount"
  value={debitAmount}
  onChange={handleInputChange}
  InputProps={{
    classes: { input: classes.textfield1 },
  }}
/>

In this example, the handleInputChange function is called when the value of the Textfield changes. It removes any existing commas in the input, converts the value to a number, and then applies the toLocaleString() method to format the number as an amount with two decimal places.

Conclusion

In this tutorial, we have explored two different approaches to format a material-ui Textfield as an amount. The react-number-format library provides a convenient way to achieve this formatting, while the toLocaleString() method offers a simpler solution using JavaScript’s built-in functionality.

Whether you choose to use react-number-format or toLocaleString(), you now have the tools to format your Textfield inputs as amounts with thousands separators and decimal points. Choose the method that best fits your project requirements and start creating more user-friendly input fields.

reference : 

reactjs