formatting number in input react

Question

I have made an Input component. If it is a number I want to format it correctly, like a currency. I.e. 4000 would be 4,000.

Here is a codesandbox.

I am having issues with displaying and updating this.

<Input initialValue={'400000000'} isNumber={true} />

My Input component looks like this.

type Props = {
    initialValue?: string;
    isNumber?: boolean;
};

const Input = ({ initialValue = '', isNumber }: Props) => {
    const [value, updateValue] = useState(initialValue);

    const update = (val: any) => {
        if (isNumber) {
            const x = Number(val);
            updateValue(x.toLocaleString());
        } else {
            updateValue(val);
        }
    };

    return (
        <StyledInput
            type="text"
            value={value}
            onChange={e => update(e.target.value)}
        />
    );
};

I am seeing an error NaN in my input component. Anyone have any ideas?

Answer 1

Javascript has a number formatter (part of the Internationalization API).

    // Quick Solution With Intl.NumberFormat
    const update = (val: any) => {
    var formatter = new Intl.NumberFormat("en-US");         // Intl language tag,
    updateValue(formatter.format(val.replace(/,/g, "")));   //Remove ',' to format number again
    };

Code Snippet:

// Intl.NumberFormat With React State Update

var currentVal = 0;
...
const update = (event: any) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   const caret = event.target.selectionStart
      const element = event.target
         window.requestAnimationFrame(() => {
         element.selectionStart = caret
         element.selectionEnd = caret
      })
   // -- Stop cursor jumping when formatting number in React

   var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.)
   var x = Number(val.replace(/,/g, ""));
   if (currentVal != x) {
      var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2});
      currentVal = formatter.format(x);
      updateValue(currentVal);
   }else{
      updateValue(val);
   }
 };

 return (<input type="text" value={value} onChange={e => update(e)} />);

Note : Code Snippet gives you an idea to format numbers, You need to handle few more use-cases for production.

Also check the react-number-format, Which may suit for your application.

Reference :

• Intl.NumberFormat vs Number.prototype.toLocaleString
• How can I format numbers as dollars currency string in JavaScript?
• Intl.NumberFormat | MDN