Text Currency Format

NumberFormat.tsx

import React from 'react';
import NumberFormat, { FormatInputValueFunction } from 'react-number-format';

interface NumberFormatCustomProps {
  inputRef: (instance: NumberFormat | null) => void;
  onChange: (event: { target: { value: string } }) => void;
}

const currencyFormatter: FormatInputValueFunction = (value: string) => {
  if (!Number(value)) return '';

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

  return `${amount}`;
};

function NumberFormatCustom(
  props: NumberFormatCustomProps,
): React.ReactElement {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
      {...other}
      NumberFormatCustom
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value,
          },
        });
      }}
      thousandSeparator="."
      decimalSeparator=","
      format={currencyFormatter}
    />
  );
}

export default NumberFormatCustom;

TextField

<TextField
          id="formatted-numberformat-input"
          InputProps={{
            inputComponent: NumberFormatCustom as any,
            startAdornment: (
              <InputAdornment position="start">R$</InputAdornment>
            ),
          }}
        />