How to use currency format to fill decimal/cents first?

Consider the following input value: 12345

The output would be: $ 123.45 instead of $ 1,2345.00.

How to achieve the first output using this library?

This is how I am using right now, unfortunately I couldn’t make it work as desired:

<NumberFormat
  customInput={Input}
  decimalScale={2}
  decimalSeparator=","
  fixedDecimalScale
  onKeyDown={onEnter(handleEnter)}
  onValueChange={handleValueChange}
  placeholder="$ 0,00"
  prefix="$ "
  thousandSeparator="."
  value={value}
/>

[richardaum]

@felri I’ve found out how to format the number properly - using a formatter. The trick is to divide value by 100.

export default function currencyFormatter(value) {
  if (!Number(value)) return "";

  const amount = new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL"
  }).format(value / 100);

  return `${amount}`;
}

Then you must use this format into your component:

<NumberFormat {...allOtherRequiredProps} format={currencyFormatter} />

[richardaum]

Yeah. This is expected because the approach is based on a formatter only. So it will only change how the number is displayed. You must handle the float number and divide it by 100 before persisting it or whatever you do with this number.

An alternative could be if a implementation is made to make this feature native, then we could expect float number also be divide by 100 automatically.

You could also implement your own wrapper to this component and expose a float number already divided by 100.