Máscara de Moeda e Preço

Escolha um país

Preço (BR)

Função de Máscara:

export function maskCurrency(value: string | number) {
  const locale = "pt-BR";
  const options: Intl.NumberFormatOptions = {
    style: "currency",
    currency: "BRL",
    currencyDisplay: "symbol",
    minimumFractionDigits: 2,
  };

  const currency_value = parseFloat(`${value}`.replace(/[^\d]/g, "")) / 100;

  return currency_value
    ? new Intl.NumberFormat(locale, options).format(currency_value)
    : "";
};

Exemplo:

import React from "react";

export function maskCurrency(value: string | number) {
  const locale = "pt-BR";
  const options: Intl.NumberFormatOptions = {
    style: "currency",
    currency: "BRL",
    currencyDisplay: "symbol",
    minimumFractionDigits: 2,
  };

  const currency_value = parseFloat(`${value}`.replace(/[^\d]/g, "")) / 100;

  return currency_value
    ? new Intl.NumberFormat(locale, options).format(currency_value)
    : "";
};

export default function App() {
  const [price, setPrice] = React.useState("");
  return (
    <div className="App">
      <input
        type="tel"
        placeholder="R$ X,XXX.XX"
        value={price}
        onChange={(e) => setPrice(maskCurrency(e.target.value))}
      />
    </div>
  );
}

Observação:

Ao utilizar máscaras, use input com o type='tel', dessa forma o input abrirá o teclado numérico em dispositivos mobile e permitirá a escrita de caracteres especiais.

A função de máscara no exemplo acima já previne que o usuário digite letras quando não for permitido.